问题解释：

Question

我想在jQuery中延迟.keypress()方法的操作一段时间。

我寻找的解决方案如下：

function sleep(milliseconds) {
  var start = new Date().getTime();
  for (var i = 0; i < 1e7; i++) {
    if ((new Date().getTime() - start) > milliseconds){
      break;
    }
  }
}

和setInterval，setTimeout方法也是如此，但在第一个版本中它冻结了我真正不想做的网页。在第二部分，我不知道如何将我的脚本包装到这些功能中。

我的代码示例：

$(document).ready(function() {
//some code
    $(document).keypress(function(event){/*...this fragment I want to be freezed*/});
});

问题解释：

我们假设我有一个简单的计数器，它位于keypress事件处理程序中，计算用户按下 Enter 按钮的次数。并且在第三次点击之后我希望页面不响应用户按下5秒钟而不冻结整个页面（用户仍然可以点击某个<button>等等。但是键盘上的任何按键都不会做任何事情直到剩下5秒（冻结keypress事件处理程序）。

Answer 1

这是一件相当简单的事情

var delay = ( function () {
    var ticker = null;

    return function( callback, ms ) {
        if ( ticker !== null ) {
            clearTimeout( ticker )
        }

        ticker = setTimeout(callback, ms)
    }
} () )

$(document).ready(function() {
    // Pass delay two parameters, the first one is the callback
    // You want to delay, the second is the time in milliseconds to wait
    $(document).on( "click", function() {
         delay( function(){ ... }, 3000 )
    } );
});

以下是如何使用此示例的示例：http://jsfiddle.net/p0tf8of0/8/

这是延迟函数的另一种变体，这个变量接受第三个参数，用于在一定量的调用后延迟。

var delay = ( function () {
    var ticker = null;
    var invokedCounter = 0

    return function( callback, ms, delayAfter ) {
        if ( typeof delayAfter === "number" && delayAfter > 0 && delayAfter === invokedCounter ) {
            if ( ticker !== null ) {
                clearTimeout( ticker )
            }

            ticker = setTimeout(callback, ms)
        } else {
            invokedCounter++
            callback()
        }
    }
} () )

示例：http://jsfiddle.net/p0tf8of0/12/

Answer 2

使用lodash或underscore（实用程序js库）中的debounce()函数

去抖动允许在定义的时间内仅触发一次事件。

jQuery（'＃myDiv'）。on（'click'，_。debounce（myFunction，300，{'leading'：true，'trailing'：false}））;

JS按键延迟

问题解释：

2 个答案: