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;
    };
};