函数防抖和函数节流

时间秒杀一切 提交于 2020-01-18 03:54:00

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

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

function throttle(method , duration ,delay ){

    var timer = null,

        // 记录下开始执行函数的时间

        begin = new Date();

 

    return function(){

        var context = this,

            args = arguments,

            // 记录下当前时间

            current = new Date();

        // 函数节流里的思路

        clearTimeout(timer);

 

        // 记录下的两个时间相减再与duration进行比较

        if(current-begin >= duration){

             method.apply(context , args);

             begin = current;

        }else{ 

            timer = setTimeout(function(){

                method.apply(context , args);

            } , delay);

        }

    }

}

2、函数节流不是要在每完成等待某个时间后去执行某函数,而是要每间隔某个时间去执行某函数,避免函数的过多执行。

使用场景:滚动浏览器滚动条的时候,更新页面上的某些布局内容或者去调用后台的某接口查询内容。同样的,如果不对函数调用的频率加以限制的话,那么可能我们滚动一次滚动条就会产生N次的调用了。

throttle: function (method, context) {//函数节流

        clearTimeout(method.tId);

        method.tId = setTimeout(function () {

            method.call(context);

        }, 100);

    }

**underscore.js中提供了这两种方法,可以直接调用。

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!