前端面试必备:防抖与节流之节流及其封装函数

节流相对于防抖来说就很好理解了,节流就是限制流量,比如,在一段时间内,只能触发一次,而不是像防抖一样,一直延迟延迟。

在这里,这段时间就是一个判断标准,我们只需要取此次触发事件的时间和上次触发事件的时间的差值,与我们设定的这段时间进行比较即可,如果超过,那么就可以触发,如果不可以,就要重新设置计时器。

看过防抖的小伙伴看节流一定更加流畅,鉴于节流比较简单,就直接上代码加注释。

  function throttle(fn,delay){
        var t=null;
        var begin=new Date().getTime();//获取进入的时间
        return function(){
            var _self=this,
            args=arguments,
            cur=new Data().getTime()//当前的时间
            clearTimeout(t)//清除计时器
            if(curr-begin>=delay){//当时间长于设置的时间,就执行
                fn.apply(_self,args);
                begin=cur;//此时的curr就应该是新的delay
            }else{//没办法执行时只能填上新的计时器
                t=setTimeout(function(){
                    fn.apply(_self,args)
                },delay)
            }
        }
    }

不了解的可以看下防抖部分

防抖的链接:前端面试必备:防抖与节流之防抖及其函数封装 

猜你喜欢

转载自blog.csdn.net/weixin_42309926/article/details/108211711