js中的防抖和节流

防抖和节流

 

防抖：短时间内大量触发同一个事件，那么只会执行一次函数（使用setTime,加上一个变量计时）

javascript代码:

function debounce(fn,delay){
    let timer=null
     if(timer){
        
        clearTimeout(timer);//走到这里代表短时间内不是第一次执行这个事件，所以取消当前计时，重新开始计时
    }
    timer=setTimeout(fn,delay)  //开始或者重新开始计时
}

节流：如果短时间内大量触发同一个事件，那么在函数执行一次之后，该函数在指定的事件期限内不再执行，直至过了这段时间才重新生效(实现：借助setTimeout,加上一个状态为state来表示函数是否处于工作状态)

javascript代码:

function throttle(fun,delay){
    let timer=null;
    return function(){
        if(!timer){
            timer=setTimeout(function(){
                fun();
                timer=null
        },delay)
     }
   }
}
    
    
                                 

js防抖和节流的比较：

相同点：

都通过setTimeout()实现

目的都是，降低回调执行频率，节省计算资源

不同点：

函数防抖在一段连续操作结束后，处理回调，利用clearTimeout和setTimeout实现。函数节流，在一段连续操作中，一段时间只执行一次，频率较高的事件中使用来提高性能。

函数防抖关注一定事件连续触发的事件只在执行一次，函数节流侧重于一段时间只执行一次.

应用场景：

函数防抖：搜索框输入搜索。只需用户最后一次输入完，再发送请求.

手机号，邮箱验证

函数节流：滚动加载，高频率点击提交，表单重复提交的问题