面试必问题：JS防抖与节流

时间：2024-02-17 12:51:43

摘要：防抖与节流可谓是面试常见，其实很好理解，下面带你分分钟了解防抖与节流的基本思想与写法~

本文分享自华为云社区《JS防抖与节流快速了解与应用》，作者：北极光之夜。 。

一.速识防抖：

防抖与节流可谓是面试常见，其实很好理解，下面带你分分钟了解防抖与节流的基本思想与写法~

在这之前，比如我们先定义一个按钮，并绑定一个点击事件，执行要触发的事件：

<!-- 定义一个按钮 -->
<input type="button" id="btn" value="按钮" />

<script>
// 获取标签
  var btn = document.getElementById("btn");
// 绑定事件  
  btn.addEventListener("click", real);
// 要触发的事件
  function real(e) {
    console.log("北极光之夜。");
    console.log(e);
  }
</script>

执行如下：

在这里插入图片描述

可以发现，一直点击会一直触发事件，如果这个事件为发送一个请求，那么这对与服务器来说是很不友好的。同样的请求因为用户的多次点击而多次发送请求，返回的结果和只点击一次是一样的，大大加重服务器压力和影响性能。所以，我们引入防抖的概念，简单来说，防抖就是通过setTimeout 的方式，在一定的时间间隔内，将多次触发变成一次触发。 直接看下面例子：

1.通过setTimeout的方式延迟执行：

第一种方式为通过设置setTimeout定时器的方式延迟执行，当快速多次点击的时候，每一次都会重置定时器，只有你一段时间都不点击时定时器才能到达条件并执行事件函数。

  <input type="button" id="btn" value="按钮" />
    <script>
      var btn = document.getElementById("btn");
      // 点击后触发trigger()函数，第一个参数为真实要执行的函数，第二个参数为定时器延迟时间
      btn.addEventListener("click", trigger(real, 1000));
      function trigger(fn, delay) {
        // 设置time为定时器，初始为 null
        var time = null;
         // 闭包原理，返回一个函数
        return function () {
          // 如果定时器存在清空定时器
          if (time) {
            clearTimeout(time);
          }
          // 设置定时器，规定时间后执行真实要执行的函数
          time = setTimeout(() => {
          // 将参数传递给真实执行的函数，因为箭头函数继承父级作用域，所以直接...arguments
            fn(...arguments);
          }, delay);
        };
      }
      //真实要执行函数
      function real(e) {
        console.log("北极光之夜。");
        console.log(e);
      }
 
   </script>

其中会利用闭包的原理形成作用域，使得定时器不会被下一次点击重复或清空。闭包不清楚的可以看我这篇文章

相关文章