博客

最近因为疫情隔离居家办公，闲着没事也在回忆和整合学过的知识，这里给大家分享几个有关“防抖”和“节流”方法，希望对大家有所帮助

1 前言

在前端开发过程中，会遇到很多实时输入查询、滚动条触发等业务。而这些频发操作的事件，如果每次触发都进行执行的话，会造成性能下降、后台的压力变大，那么此时就需要使用防抖和节流进行处理。

防抖和节流，见名思义：

防抖

是防止抖动，

节流

是节约流量。

2 防抖

防抖(Debounce)

指的是触发事件后n秒后才能执行函数，如果在n秒内触发了事件，则会重新计算执行时间。

常见场景：点击按钮、拍照、下拉触底加载下一页等。

持续触发输入事件时，并不会立即执行func函数，而是在指定时间delay中没有再次触发事件时，才会进行延时执行func函数。

2.1 原始栗子(未进行防抖处理)

为了更加深入透彻地理解为什么要进行防抖处理，我们可以先体验不进行防抖的输入函数触发ajax实时请求的情况。

<div class="box">
  没有进行防抖处理的：<input type="text" id="name" name="name">
</div>
<script>
  // 模仿一段ajax请求
  function ajax(value){
    console.log("ajax request: " + value + ", time: " + new Date());
  }

  const inputBox = document.getElementById("name");
  inputBox.addEventListener("keyup",e=>{
    ajax(e.target.value);
  })
</script>

复制代码

运行结果：

上面结果所示，只要我们在输入框中每次输入值、按下键盘，那么就会触发一次ajax请求，这对于用户和开发者而言都是不好的体验和资源的浪费。此时，我们想到每次用户输入文字都是需要一定时间的，那么我们可以定义在规定时间进行完整输入才能进行请求，这样我们可以减轻对后台的压力。

2.2 防抖栗子

前面，我们看到对于短时间内频繁点击或输入的事件触发，未使用防抖处理的事件对于用户体验并不是很好。因此我们可以使用防抖进行处理，如下：

<div class="box">
  进行防抖处理的：<input type="text" id="name" name="name">
</div>
<script>
  // 模仿一段ajax请求
  function ajax(value){
    console.log("ajax request: " + value + ", time: " + new Date());
  }

  // 防抖函数
  function debounce(func,delay){
    let timeout; //定时器
    return function(arguments){
      // 判断定时器是否存在，存在的话进行清除，重新进行定时器计数
      if(timeout) clearTimeout(timeout);//清除之前的事件
      timeout = setTimeout(()=>{
        func.call(this,arguments);//执行事件
      },delay);
    }
  }

  const inputBox = document.getElementById("name");
  // 使用防抖函数进行封装ajax
  let debounceAjax = debounce(ajax,500);
  inputBox.addEventListener("keyup",e=>{
    debounceAjax(e.target.value);
  })
</script>

复制代码

运行结果：

从上面的运行结果可以看出，在500ms内输入文字按下键盘都不会触发请求事件，而是在输入框的定时器500ms停止输入后发送请求。实现原理很简单，就是对于频繁输入的输入框请求事件添加定时器进行计数，在指定时间内进行频繁输入并不会进行ajax请求，而是在指定时间间隔内停止输入才会执行函数。当停止输入但在此定时器计数时间内，会重新进行触发请求事件

3 节流

节流(Throttle)

指的是连续触发事件但是在n秒中只执行一次函数。即不管你在指定时间内触发多少次函数，但是它只执行一次事件。(只有一次生效)

常见场景：即时查询

在持续进行触发输入事件时，并不会立即执行func的函数请求，而是每隔指定的delay时间后才会执行一次func函数，不管这段时间内你点击了多少次。

3.1 节流栗子

<div class="box">
  进行节流处理的：<input type="text" id="name" name="name">
</div>
<script>
  // 模仿一段ajax请求
  function ajax(value){
    console.log("ajax request: " + value + ", time: " + new Date());
  }

  // 节流--定时器版
  function throttle(func,delay){
    let timeout;//定义一个定时器标记
    return function(arguments){
      // 判断是否存在定时器
      if(!timeout){ 
        // 创建一个定时器
        timeout = setTimeout(()=>{
          // delay时间间隔清空定时器
          clearTimeout(timeout);
          func.call(this,arguments);
        },delay)
      }
    }
  }

  const inputBox = document.getElementById("name");
  // 使用节流函数进行封装ajax
  let throttleAjax = throttle(ajax,500);
  inputBox.addEventListener("keyup",e=>{
    throttleAjax(e.target.value);
  })
</script>

复制代码

运行结果：

从上面可以看到，无论我们在输入框输入多少文字，在指定时间内只执行一次函数

4 小结

1. 函数防抖和函数节流都是防止某一时间内频繁触发。

2. 函数防抖是在指定时间只执行一次，而函数节流是每到指定间隔时间执行一次。

3. 函数防抖是将几次操作合并为一此操作进行，函数节流使得一定时间内只触发一次函数。

应用场景

1. 防抖debounce

search搜索联想，用户在不断输入值时，用防抖来节约请求资源。

window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次

2. 节流throttle

鼠标不断点击触发，mousedown(单位时间内只触发一次)

监听滚动事件，比如是否滑到底部自动加载更多，用来判断。

如果对您有所帮助，欢迎您点个关注，我会定时更新技术文档，大家一起讨论学习，一起进步。

[这里是图片005]