阅读 100

js中的防抖与节流

防抖与节流形成过程

首先在介绍防抖与节流之前,我们要清楚为什么我们需要它们?

在前端有许多高频事件比如 onscroll oninput resize onkeyup keydown...,这样执行频率比较高,还比如有一些输入框联想查询,我们不需要一输就发送ajax,我们要等待输入稳定时在进行输入,这是我们想要的。。

scroll和resize行为也会导致页面不断的重新渲染,如果在绑定的回调函数中大量操作dom会导致出现页面卡顿。。

这些都需要我们进行优化,这时候防抖(throttle),节流(debounce)就出现了

函数节流(Throttle)

节流就是保证一段时间内,核心代码只执行一次 打个比方:水滴积攒到一定重量才会下落

简易节流函数
 <button id="btn">快速点击</button>

复制代码

实现一秒内点击一次

 let btn = document.getElementById('btn');
    function throttle(func,wait){
        let previous = 0;
        return function(){
            let now = Date.now();
            if(now - previous > wait){
                func.apply(this,arguments);
                previous  = now;
            }
        }
    }
    function logger(){
     console('logger')
    }
    btn.addEventListener('click',throttle(logger,1000));

复制代码
节流函数完整版
// 实现了 trailing 最后一次点出会触发事件,leading:第一次点击不生效
   let btn = document.getElementById('btn');
    function throttle(func,wait,options){
        // trailing 最后一次触发
        let args , context,previous = 0,timeout; //将参数,函数上下文进行保存
        let later = function (){
            previous = options.leading === false ? 0:Date.now();
            func.apply(context,args);
            args =context = null;
        }
        let throttled = function(){
           args = arguments;
           context = this;
           let now =  Date.now();
           if(!previous && options.leading === false) previous = now;
           let remain = wait -  (now - previous);
        
           if(remain <=0){ //第一次
           if(timeout){
               clearTimeout(timeout);
               timeout = null;
           }
            func.apply(context,args);
            previous = now;
           }else if(!timeout && options.trailing !== false){ //最后一次点出会触发事件
            timeout = setTimeout(later,remain);
           }
        }
        return throttled;
    }
    function logger(){
     console('logger')
    }
    //  leading:false :第一次点击不生效
    
    btn.addEventListener('click',throttle(logger,1000,{ leading:false }));
复制代码
函数防抖(Debounce)

防抖就是一段时间结束后,才能触发一次,如果一段时间未结束再次触发,就会重新开始计算时间。 打个比方: 你在做电梯,门快要关了,突然有人准备上来。电梯门会重新打开,延迟了电梯门关闭时间,上来之后就重新关闭。

防抖函数
 function debouce(func,wait,immediate){
     let timeout;
     return function(){
         clearTimeout(timeout); //重新开始计时
         if(immediate){
             let collNow = !time;
             if(collNow) func.apply(this,arguments);
         }
         timeout  = setTimeout(()=>{
             func.apply(this,arguments);
         },wait)
     }
 } 
 function logger(){
     console('logger')
    }
    // 第三个参数表示首次先触发一下
 btn.addEventListener('click',debounce(logger,1000,true)
复制代码
文章分类
前端
文章标签