前端必会的“防抖”和“节流”方法

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>

复制代码

运行结果： 

<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>