1. 前言

以下场景往往由于事件被频繁触发,频繁执行 DOM 操作、资源加载等行为,从而导致 UI 卡顿甚至浏览器崩溃。

  1. window 对象的 resizescroll 事件
  2. 拖拽时的 mousemove 事件
  3. 射击游戏中的 mousedownkeydown 事件
  4. 文字输入、自动完成的 keyup 事件

实际上,对于 window 的 resize 事件,实际需求大多为停止改变大小 N 毫秒后再执行后续处理;而其他事件大多的需求是以一定的频率执行后续处理。针对这两种需求就出现了 debounce 和 throttle 两种解决办法。

2. debounce

2.1 定义

如果用手指一直按住一个弹簧,它将不会弹起直到你松手为止。

也就是说,当调用动作 N 毫秒后,才会执行该动作;若在这个 N 毫秒内又调用此动作,则将重新计算执行时间。

接口定义:

/**
 * 空闲控制:函数连续调用时,空闲时间必须大于或等于 idle,action 才会执行
 * @param idle number 空闲时间,单位毫秒
 * @param action function 请求关联函数,实际应用需要调用的函数
 * @return function 返回客户调用函数
 */
 debounce(idle, action)

2.2 简单实现

var debounce = function (idle, action) {
    var last;
    return function () {
        clearTimeout(last);
        last = setTimeout(function () {
            action.apply(this, arguments);
        }, idle);
    }
}

3. throttle

3.1 定义

如果将水龙头拧紧直到水以水滴形式流出,那么你会发现每隔一段时间,就会有一滴水流出。

也就是说,预先设定一个执行周期,当调用动作的时刻大于或等于执行周期,则执行该动作,然后进入下一个新的周期。

接口定义:

/**
 * 频率控制:函数连续调用时,action 执行频率限定为次
 * @param delay number 延迟时间,单位毫秒
 * @param action function 请求关联函数,实际应用需要调用的函数
 * @return function 返回客户调用函数
 */
 throttle(delay, action)

3.2 简单实现

var throttle = function (delay, action) {
    var last = 0;
    return function () {
        var curr = +new Date();
        if (curr - last > delay) {
            action.apply(this, arguments);
            last = curr;
        }
    }
};

4. underscore v1.7.0 源码剖析

4.1 _.throttle 函数

_.throttle = function (func, wait, options) {
    /* options 的默认值
     *  表示首次调用返回值方法时,会马上调用 func;否则仅会记录当前时刻,当第二次调用的时间间隔超过 wait 时,才调用 func。
     *  options.leading = true;
     * 表示当调用方法时,未到达 wait 指定的时间间隔,则启动计时器延迟调用 func 函数,若后续在既未达到wait指定的时间间隔和 func 函数又未被调用的情况下调用返回值方法,则被调用请求将被丢弃。
     *  options.trailing = true; 
     * 注意:当 options.trailing = false 时,效果与上面的简单实现效果相同
     */
    var context, args, result;
    var timeout = null;
    var previous = 0;
    if (!options) options = {};
    var later = function () {
        previous = options.leading === false ? 0 : _.now();
        timeout = null;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
    };
    return function () {
        var now = _.now();
        if (!previous && options.leading === false) previous = now;
        // 计算剩余时间
        var remaining = wait - (now - previous);
        context = this;
        args = arguments;
        // 当到达 wait 指定的时间间隔,则调用 func 函数
        // 精彩之处:按理来说 remaining <= 0 已经足够证明已经到达 wait 的时间间隔,但这里还考虑到假如客户端修改了系统时间则马上执行 func 函数。
        if (remaining <= 0 || remaining > wait) {
            // 由于 setTimeout 存在最小时间精度问题,因此会存在到达 wait 的时间间隔,但之前设置的 setTimeout 操作还没被执行,因此为保险起见,这里先清理 setTimeout 操作
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            // options.trailing=true 时,延时执行 func 函数
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};

4.2 _.debounce 函数

_.debounce = function (func, wait, immediate) {
    // immediate 默认为 false
    var timeout, args, context, timestamp, result;

    var later = function () {
        // 当 wait 指定的时间间隔期间多次调用 _.debounce 返回的函数,则会不断更新 timestamp 的值,导致 last < wait && last >= 0 一直为 true,从而不断启动新的计时器延时执行 func
        var last = _.now() - timestamp;

        if (last < wait && last >= 0) {
            timeout = setTimeout(later, wait - last);
        } else {
            timeout = null;
            if (!immediate) {
                result = func.apply(context, args);
                if (!timeout) context = args = null;
            }
        }
    };

    return function () {
        context = this;
        args = arguments;
        timestamp = _.now();
        // 第一次调用该方法时,且 immediate 为 true,则调用 func 函数
        var callNow = immediate && !timeout;
        // 在 wait 指定的时间间隔内首次调用该方法,则启动计时器定时调用 func 函数
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
};

5. 总结

throttle 和 debounce 均是通过减少实际逻辑处理过程的执行来提高事件处理函数运行性能的手段,并没有实质上减少事件的触发次数。两者在概念理解上确实比较容易令人混淆,结合各 JS 库的具体实现进行理解效果将会更好。

原文地址