JS按键延迟

JS keypress delay

本文关键字：延迟 JS      更新时间：2023-09-26

我想延迟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事件处理程序中计算输入按钮被用户按下的次数。在第三次点击后，我希望页面不响应用户按压5秒而不冻结整个页面(用户仍然可以点击某个<button>等。但是键盘上的任何按键在5秒前都不会有任何动作(冻结keypress事件处理程序)。

这是一些相当简单的东西

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/

从lodash或underscore(一个utility js库)中使用debounce()函数

Debounce只允许在定义的周期内触发事件一次。

jQuery("# myDiv")。on('click'， __debounce (myFunction, 300， {'leading': true， 'trailing': false}));

相关文章：