函数节流与防抖实现

不念不忘少年蓝@ 2021-11-10 20:22 367阅读 0赞

问题引出：

什么是函数节流？什么是函数防抖？

## 1. 函数节流 ##

函数节流：一个函数执行一次后，只有大于设定的时间周期才会执行第二次。

函数节流限制一个函数在一定时间内只能执行一次。

场景：有个需要频繁触发的函数，出于性能优化角度，在规定的时间内，  
只让函数触发的第一次生效，后面的不生效。

代码实现：

/* 节流函数：throttle fn: 要被节流的函数 delay：规定的时间 */
     function throttle(fn,delay){ 
         // 记录上一次触发的时间
         var lasttime = 0 ;
         // 通过闭包的方式使用lasttime变量，每次都是上次的时间
         return function(){ 
             // 
             var nowtime = Date.now();
             if(nowtime-lasttime>delay){ 
                 // 修正this函数问题
                 fn.call(this);
                 // 同步时间
                 lasttime = nowtime;
             }
         }
         
     }
     // document.onscroll = throttle(function(){ 
     // console.log("scroll事件被触发了"+Date.now());
     // }
     // ,2000)

上方代码设置时间为2s，实现的效果，当滚动屏幕时控制台打印当前时间戳，虽然是一直滚动屏幕，但也是在时间周期2s后才会第二次输出当前时间戳。由此实现了函数的节流。

## 2.函数防抖 ##

函数防抖：一个需要频繁触发的函数，在规定时间内只让最后一次生效，前面不生效。就是指触发事件后在 n 秒内函数只能执行一次，如果在 n 秒内又触发了事件，则会重新计算函数执行时间。

比如移动端input框输入时，输入结束一定时间后才知道用户输入结束，此时取输入的内容最为合适。

代码实现：

function debounce(fn,delay){ 
         // 记录上一次的延时器
         var timer = null;
         return function(){ 
             // 清除上一延时器
             clearTimeout(timer)
             // 重新设置新的延时器
             timer = setTimeout(function(){ 
                     fn.apply(this)
             },delay)
         }
     }
     document.getElementById('btn').onclick = debounce(function(){ 
         console.log('点击事件被触发了'+Date.now());
     },2000)

实现的效果：

![result][]

用户最后一次点击按钮设定的时间2s后控制台才会输出当前时间戳。而正常情况是用户点击依次输出依次。

## 3.节流与防抖区别 ##

1.  函数防抖debounce，在一段连续操作结束后，处理回调，利用 clearTimeout 和 setTimeout 实现。
2.  函数节流throttle，在一段连续操作中，每一段时间只执行一次，频率较高的事件中使用来提高性能。
3.  函数防抖debounce关注一定时间连续触发，只在最后执行一次，而函数节流throttle侧重于一段时间内只执行一次。

正常情况、函数防抖情况 debounce、函数节流 throttle下，对于mousemove事件回调的执行情况如下：  
![防抖节流][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]

## 4.应用场景 ##

1.  **函数防抖的应用场景**
    
    连续的事件，只需触发一次回调的场景有：
    
    1.搜索框搜索输入。只需用户最后一次输入完，再发送请求。
    
    2.手机号、邮箱验证输入检测。
    
    3.窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。
2.  **函数节流的应用场景**
    
    间隔一段时间执行一次回调的场景有：
    
    1.滚动加载，加载更多或滚到底部监听。
    
    2.高频点击提交，表单重复提交

[result]: /images/20211109/602b104b315f4643820e309d54d4eb96.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3cxNDE4ODk5NTMy_size_16_color_FFFFFF_t_70]: /images/20211109/cc4bf6da6ce64475aa75038d172151a1.png