看看jQuery Debounce。

$('#search').keyup($.debounce(function() {
    // Will only execute 300ms after the last keypress.
}, 300));

这是一个不需要插件的潜在解决方案。使用布尔值来决定是执行 keyup 回调，还是跳过它。

var doingKeyup = false;

$('input').keyup(function(){
    if(!doingKeyup){
        doingKeyup=true;
        // slow process happens here
        doingKeyup=false;
    }
});

你也可以使用优秀的Underscore/_库。

Josh 的回答中的评论，目前最流行的，争论是否真的应该限制通话，或者是否需要去抖动器。区别有点微妙，但 Underscore 同时具有:_.debounce(function, wait, [immediate])和_.throttle(function, wait, [options]).

如果您还没有使用 Underscore，请检查一下。它可以让你的 JavaScript 更简洁，并且足够轻量级让大多数库讨厌者停下来。

这是使用 JQuery 执行此操作的一种简洁方法。

    /* delayed onchange while typing jquery for text boxes widget
    usage:
        $("#SearchCriteria").delayedChange(function () {
            DoMyAjaxSearch();
        });

    */
    (function ($) {
        $.fn.delayedChange = function (options) {
            var timer;
            var o;

            if (jQuery.isFunction(options)) {
                o = { onChange: options };
            }
            else
                o = options;

            o = $.extend({}, $.fn.delayedChange.defaultOptions, o);

            return this.each(function () {
                var element = $(this);
                element.keyup(function () {
                    clearTimeout(timer);
                    timer = setTimeout(function () {
                        var newVal = element.val();
                        newVal = $.trim(newVal);
                        if (element.delayedChange.oldVal != newVal) {
                            element.delayedChange.oldVal = newVal;
                            o.onChange.call(this);
                        }

                    }, o.delay);
                });
            });


        };

        $.fn.delayedChange.defaultOptions = {
            delay: 1000,
            onChange: function () { }
        }

        $.fn.delayedChange.oldVal = "";


    })(jQuery);

节流方法的两个小型通用实现。（我更喜欢通过这些简单的函数来完成，而不是添加另一个 jquery 插件）

1. 上次通话后等待一段时间

   当我们不想在用户不断输入查询时调用例如搜索功能时，这个很有用

function throttle(time, func) {
  if (!time || typeof time !== "number" || time < 0) {
      return func;
  }

  var throttleTimer = 0;

  return function() {
    var args = arguments;
    clearTimeout(throttleTimer);
    throttleTimer = setTimeout(function() {
      func.apply(null, args);
    }, time);
  }
}

2. 调用给定函数的频率不超过给定的时间

   下面一个对刷新日志很有用

function throttleInterval(time, func) {
  if (!time || typeof time !== "number" || time < 0) {
      return func;
  }

  var throttleTimer = null;
  var lastState = null;
  var eventCounter = 0;
  var args = [];

  return function() {
    args = arguments;
    eventCounter++;
    if (!throttleTimer) {
      throttleTimer = setInterval(function() {
        if (eventCounter == lastState) {
          clearInterval(throttleTimer);
          throttleTimer = null;
          return;
        }

        lastState = eventCounter;
        func.apply(null, args);
      }, time);
    }
  }
}

用法很简单：

以下是在 inputBox 中最后一次击键后等待 2 秒，然后调用应该被限制的函数。

$("#inputBox").on("input", throttle(2000, function(evt) {
  myFunctionToThrottle(evt);
}));

这是您可以同时测试的示例：单击 (CodePen)