防抖debounce和节流throttle

Posted learnings

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了防抖debounce和节流throttle相关的知识,希望对你有一定的参考价值。

大纲

一、出现缘由

二、什么是防抖debounce和节流throttle

三、应用场景

3.1防抖

3.2节流

一、出现缘由

前端开发中,有一部分用户行为会频繁触发事件,而对于DOM操作,资源加载等耗费性能的处理,很可能导致卡顿,甚至浏览器崩溃,防抖和节流就是为了这一类的问题出现的前端优化技术。

二、什么是防抖debounce和节流throttle

防抖debounce是函数在规定延迟时间内不被调用,才能再次被调用,如果在规定时间内调用,延迟重新开始计算;

节流throttle是在规定的延迟时间间隔后,函数才执行一次,以固定的频率被触发。

三、简单实现

3.1防抖

连续触发事件的时候,不会有任何反应,停止触发事件的多少秒,就会执行,在延迟时间内执行函数,就重新开始一个定时器。

 

function debounce(func,delay=300,timer=null){
    return (...args){
        clearTimeout(timer);
        timer=setTimeout(func.bind(null,...args,delay);)
    }
}
function query(){
    //ajax
}
input.addEventListener(‘keyup‘,debounce(query))

 

  

 

3.2节流

触发事件的时候,执行一个函数,在之后的一段时间内进这个函数,会被return,真正的逻辑不能执行,定时器在一定时间后重置开关,再进来就能再次执行真正的逻辑了。

 

function throttle(func,delay=60){
    let lock=false;
    return (...args)=>{
        if(lock)reutrn;
        function(..args);
        lock=true;
        setTimeout(()=>lock=false,delay);
    }
}
function query(){
    //ajax
}
decument.addEventListener(‘scroll‘,throttle(query));

 

  

 

四、应用场景

3.1防抖throttle的应用场景

防抖适用于window.onscroll事件,等到拉动动作结束后再触发一个事件,或者拖拽

 

    _.throttle=function(func,wait,options){
        var context,args,result;
        var timeout=null;
        var previous0;
        if(!options)options={}
        var later=function(){
            previous=options.leading===false:0:new Date();
            timeout=null;
            result=func.apply(context,args);
            if(!timeout)context=args=null;
        }
        return fucntion(){
            var now=new Date();
            if(!previous && option.leading===false)previous=now;
            var remaining=wait-(now-previous);
            context=this;
            args=arguments;
            if (remaining <= 0 || remaining > wait) {
                if (timeout) {
                    clearTimeout(timeout);
                    timeout = null;
                }
                previous = now;
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            } else if (!timeout && options.trailing !== false) {
                timeout = setTimeout(later, remaining);
            }
            return result;
        }
    }

 

  

 

3.2节流throttle的应用场景

下面具体讲一个例子

假设我们网站有一个搜索框,用户输入文本我们自动会联想匹配除一些结果供用户选择,我首先想到的做法是监听keypress事件或change事件,然后ajax请求数据,但是当用户快速输入的时候,就会瞬间触发一连串的请求,这无疑不是我们想要的,我们想要的是用户停止输入的时候才去触发查询的请求,这时候函数防抖可以帮助我们。

 

_.throttle=function(func,wait,immediate){
        var timeout,args,context,timestamp,result;
        var later=function(){  //如果没有超过等待时间,就接着设置一个定时器,时间是delay的时间减去方法执行的时间
            var last=new Date().getTime() - timestamp;
            if(last<wait && last>=0){
                timeout=setTimeout(later,wait-last);
            }else{   //如果已经过wait时间了,就直接清除定时器,给result赋值
                clearTimeout(timeout);
                if(!immediate){
                    result=func.apply(context.args);
                    if(!timeout)context=args=null;
                }
            }
        }
        return function(){
            context=this;
            args=arguments;
            timestamp=new Date().getTime();
            var callNow=immediate && timeout;    //如果是立即执行或者之前执行过还没过延迟时间
            if(!timeout)timeout=setTimeout(later,wait);   //如果之前没执行过,现在开始定时任务,如果执行过,timeout存在,就返回个空的result.
            if(callNow){   //如果是立即执行,就立即执行fn,这时候
                console.log(1);
                result=func.apply(context,args);
                context=args=null;
            }
            return result;
        }
    }
    function query(){
        //ajax
        console.log(‘ajax‘);
    }
    $("#search").keypress(_.throttle(query,300));

 

  

 

以上是关于防抖debounce和节流throttle的主要内容,如果未能解决你的问题,请参考以下文章

lodash 的 防抖(debounce)和节流(throttle)

防抖(debounce)和节流(throttle)

debounce(防抖)和throttle(节流)

防抖(debounce)和节流(throttle)

javascript防抖(Debouncing)和节流阀(Throttling)

javascript防抖(Debouncing)和节流阀(Throttling)