函数节流及函数防抖

函数节流及函数防抖

假设我们网站有个搜索框，用户输入文本我们会自动联想匹配出一些结果供用户选择。我们可能首先想到的做法就是监听keypress事件，然后异步去查询结果。这个方法本身是没错的，但是如果用户快速的输入了一连串的字符，假设是10个字符，那么就会在瞬间触发了10次的请求，这无疑不是我们想要的。我们想要的是用户停止输入的时候才去触发查询的请求，这时候函数防抖可以帮到我们。

函数防抖就是让某个函数在上一次执行后，满足等待某个时间内不再触发此函数后再执行，而在这个等待时间内再次触发此函数，等待时间会重新计算。

 

我们网站经常会有这样的需求，就是滚动浏览器滚动条的时候，更新页面上的某些布局内容或者去调用后台的某接口查询内容。同样的，如果不对函数调用的频率加以限制的话，那么可能我们滚动一次滚动条就会产生N次的调用了。但是这次的情况跟上面的有所不同，我们不是要在每完成等待某个时间后去执行某函数，而是要每间隔某个时间去执行某函数，避免函数的过多执行，这个方式就叫函数节流。

 

下面是自己的实现：

代码： 

function debounceScroll(fn, delay, mustRunDelay) {
        var start, timer = null;
        return function() {
            var context = this,
                args    = arguments,
                now     = +new Date();

            if (!start) {
                start = now;
            }

            if (now - start > mustRunDelay) {
                fn.apply(context, args);   // 函数节流
                start = now;
            } else {
    　　　　　　　// 函数防抖
                clearTimeout(timer);
                timer = setTimeout(function() {
                    clearTimeout(timer);
                    timer = null;
                    fn.apply(context, args);
                }, delay);
            }
        }
    }

 

posted @ 2017-03-28 10:22 黑客PK 阅读( ...) 评论( ...) 编辑 收藏