JavaScript 中, 某些事件, 如 'input', 'resize', 'scroll', 可以在很短时间内频繁触发, 如果把逻辑函数直接绑定到这些事件上, 会严重影响运行性能, 甚至造成更大的麻烦, 比如把 ajax 请求直接绑定到 'input' 事件上, 将在用户输入时产生频率很高的 ajax 请求, 给服务器造成不必要的响应压力.

解决方案:

函数防抖动 (Debouncing)

函数防抖动的思想是: 规定事件发生到响应的时间, 在此时间内再次触发的相同事件将重置倒计时, 实现防抖动.

防抖动有两种形式: 前缘响应后缘响应. 前缘响应是: 在事件第一次触发时马上响应, 然后倒计时一段时间, 在此时间内发生的事件不会响应, 而且会重置倒计时. 前缘响应典型场景如滚动时隐藏的导航栏 (绑定滚动事件), 需要在滚动开始时立即响应, 同时避免后续频繁触发.

后缘响应是: 在事件第一次触发后开始计时, 在事件最近一次发生, 且间隔一段时间没有新事件被触发时响应. 典型场景如搜索提示 (绑定输入事件), 仅在输入停止一段时间后触发 ajax, 以节省网络开销.

以下是 underscore.js 提供的防抖动函数, 同时提供的第 3 个参数immediate, 决定是否前缘触发:

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
    var timeout, args, context, timestamp, result;

    var later = function() {
        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();
        var callNow = immediate && !timeout;
        if (!timeout) timeout = setTimeout(later, wait);
        if (callNow) {
            result = func.apply(context, args);
            context = args = null;
        }

        return result;
    };
};
函数节流 (Throttling)

通过限制一定时间内事件触发的次数, 达到函数节流的目的.

underscore.js 提供的节流函数:

// Returns a function, that, when invoked, will only be triggered at most once
// during a given window of time. Normally, the throttled function will run
// as much as it can, without ever going more than once per `wait` duration;
// but if you'd like to disable the execution on the leading edge, pass
// `{leading: false}`. To disable execution on the trailing edge, ditto.
_.throttle = function(func, wait, options) {
    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;
        if (remaining <= 0 || remaining > wait) {
            if (timeout) {
                clearTimeout(timeout);
                timeout = null;
            }
            previous = now;
            result = func.apply(context, args);
            if (!timeout) context = args = null;
        } else if (!timeout && options.trailing !== false) {
            timeout = setTimeout(later, remaining);
        }
        return result;
    };
};