JavaScript节流原理与实现(throttle)

71 阅读1分钟

规定在一个单位时间内,只能触发一次函数。如果这个函数单位时间内触发多次函数,只有一次生效。

一种简单的方式就是通过设置定时器。 当触发事件的时候,我们设置一个定时器,再触发事件的时候,如果定时器存在,就不执行,直到定时器执行,然后执行函数,清空定时器,这样就可以设置下个定时器。

function throttle(func, wait) {
    var timeout;
    var previous = 0;

    return function() {
        context = this; //解决setTimeout 回调函数this问题
        args = arguments;
        if (!timeout) {
            timeout = setTimeout(function(){
                timeout = null;
                func.apply(context, args)
            }, wait)
        }
    }
}