JavaScript函数节流与防抖

目的

为了防止某些开销较大，会被多次相应的函数频繁执行。

思路

防抖(debounce)：函数开始执行之前设置一个时间作为间隔，第N次触发函数时判断时间间隔是否走完没走完重置该时间间隔，走完则执行函数体，该时间之后执行函数体。
节流 (throttle)：函数开始执行之前设置一个时间作为间隔，第N次触发函数时判断该时间间隔是否走完没走完略过体，走完则执行函数体，

应用场景

防抖(debounce)：

1. 手机号、邮箱输入检测
2. 搜索框搜索输入（只需最后一次输入完后，再放松Ajax请求）
3. 窗口大小resize（只需窗口调整完成后，计算窗口大小，防止重复渲染）
4. 滚动事件scroll（只需执行触发的最后一次滚动事件的处理程序）
5. 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，（停止输入后）验证一次就好

节流 (throttle)：

1. DOM元素的拖拽功能实现（mousemove）
2. 搜索联想（keyup）
3. 滚动事件scroll，（只要页面滚动就会间隔一段时间判断一次）

实现

防抖：

function debounce(fn, delay, scope) {
    let timer = null;
    // 返回函数对debounce作用域形成闭包
    return function () {
        // setTimeout()中用到函数环境总是window,故需要当前环境的副本；
        let context = scope || this, args = arguments;
        // 如果事件被触发，清除timer并重新开始计时
        clearTimeout(timer);
        timer = setTimeout(function () {
            fn.apply(context, args);
        }, delay);
    }
}

节流:

function throttle(fn, threshold, scope) {
    let timer;
    return function () {
        let context = scope || this, args = arguments;
        if (!timer) {
            timer = setTimeout(function () {
                fn.apply(context, args);
                timer = null;
            }, threshold)
        }
    }
}

案例

点我

引用

引用