js中的防抖和节流

防抖（debounce）：一段时间之后才执行某个函数
节流（throttle）：一段时间之内执行某个函数

防抖（debounce）： 主要是利用计时器实现；为了不污染全局变量，利用闭包，共享一个计时器变量，返回一个新的函数

myPlugin.debounce = function (callback, time) {
    var timer;
    return function () {
        clearTimeout(timer);//清除之前的计时
        timer = setTimeout(function () {
            callback();
        }, time);
    }
}

完善一下如果要传入参数的情况

myPlugin.debounce = function (callback, time) {
    var timer;
    return function () {
        clearTimeout(timer);//清除之前的计时
        var args = arguments; //利用闭包保存参数数组
        timer = setTimeout(function () {
            callback.apply(null, args);
        }, time);
    }
}

如何使用

   <script src="debounce的js路径"></script>
    <script>
        var handle = myPlugin.debounce(function(width) {
            console.log(width);
        }, 1000);
        window.onresize = function() {
            handle(document.documentElement.clientWidth);
        }
    </script>

节流（throttle）： 节流有两种做法，一种是利用计时器，等某段时候之后才执行并且在在段时间内不回重新计时；另外一种是利用时间戳，该立即执行，下一次执行需要等待

第一种方法

myPlugin.throttle = function (callback, time) {
    var timer;
    return function () {
        // 如果当前有计时，直接renturn
        if (timer) {
            return;
        }
        var args = arguments; //利用闭包保存参数数组
        timer = setTimeout(function () {
            callback.apply(null, args);
            timer = null; //函数执行完要立马清空计时器，否则将无法进行下一次执行
        }, time);
    }
}

第二种方法

myPlugin.throttle = function (callback, time) {
    var t;
    return function () {
        if (!t || Date.now() - t >= time) { //之前没有计时 或 距离上次执行的时间已超过规定的值
            callback.apply(null, arguments);
            t = Date.now(); //得到的当前时间戳
        }
    }
}

所以我们可以统一一下

myPlugin.throttle = function (callback, time, immediately) {
    if (immediately === undefined) {
        immediately = true;
    }
    if (immediately) {
        var t;
        return function () {
            if (immediately) {
                if (!t || Date.now() - t >= time) { //之前没有计时 或 距离上次执行的时间已超过规定的值
                    callback.apply(null, arguments);
                    t = Date.now(); //得到的当前时间戳
                }
            }
        }
    }
    else {
        var timer;
        return function () {
            // 如果当前有计时，直接renturn
            if (timer) {
                return;
            }
            var args = arguments; //利用闭包保存参数数组
            timer = setTimeout(function () {
                callback.apply(null, args);
                timer = null; //函数执行完要立马清空计时器，否则将无法进行下一次执行
            }, time);
        }
    }
}

如何使用

    <script>
        function test() {
            console.log("a");
        }
        var handle = myPlugin.throttle(test, 1000, false);
        window.onresize = function(){
            handle();
        }
    </script>