函数节流和函数防抖-逐码极客

函数节流（throttle）

事件在指定的时间间隔后执行一次

方法描述：

闭包函数内保存一个标记immediate = true，在函数的开头判断这个标记是否为true，如果为 true继续执行后续逻辑，否则return。判断完后立即把这个标记设为false，然后把外部传入的函数的执行包在一个 setTimeout 中，最后在 setTimeout 执行完毕后再把标记设置为 true（这里很关键），表示可以执行下一次的循环了。当 setTimeout 还未执行的时候，canRun 这个标记始终为 false，在开头的判断中被 return 掉。

示例

throttle.js

function throttle(fn, interval = 300) {
    let immediate = true;
    return function() {
        if (!immediate) return;

        immediate = false;

        setTimeout(function() {
            fn.apply(this, arguments);
            immediate = true;
        }, interval);
    }
}

函数防抖（debounce）

事件触发的间隔时间超过指定时间时执行

方法描述：闭包保存一个标记来保存setTimeout返回的值，每当用户输入的时候把前一个setTimeoutclear 掉，然后又创建一个新的setTimeout，这样就能保证输入字符后的interval间隔内如果还有字符输入的话，就不会执行fn函数

示例：

function debounce(fn, interval = 300) {
    let timeout = null;

    return function() {
        clearTimeout(timeout);

        timeout = setTimeout(function() {
            fn.apply(this, arguments);
        }, interval);
    }
}