理解防抖和节流

32 阅读1分钟

1. 什么是防抖

场景:比如快速多次点击轮播图的箭头按钮时,由于上一次图片切换还未结束,就开始了下一次图片切换,于是出现抖动现象。再比如输入关键字查询,每次输入时都触发事件并发起请求,而用户只需要最后一次的查询结果。

解决方案:定时器。

function debounce(fn, delay){
    var timer = null;

    if(timer){
        clearTimeout(timer)
    }else{
        timer = setTimeout(function(){
            fn.call(this)
        }, delay)
    }
}

btnEl.onclick = debounce(function(){
    // 业务代码
}, 1000)

2. 节流

场景:假如快速上拉加载20次,那么瞬间就会向服务器发送十次请求,这样便使页面加载速度变的很慢。而我们需要的是在规定的时间内只允许发送一次请求,超出这个时间再发送下一次请求。或者这么解释,当快速上拉加载20次,每次间隔时间很短,总体用时2s,那么假如规定只能500ms发出一次请求,那么较于上次发起请求的时间低于500ms的就不能发起请求了,所以,20次中只发起了5次请求(要加上第一次)。

解决方案1:时间戳

    function throttle(fn,delay){
        var start = 0;
        var now = new Date()
        if(now - start > delay){
            return function(){
                fn.call(this)
                start = now
            }
        }
    }

解决方案2:定时器

    function throttle(fn, delay){
        var timer = null;
        var _this = this;
        if(!timer){
            return function(){
                timer = setTimeout(function(){
                    fn.call(_this)
                    timer = null
                },delay)
            }
        }
    }