特定时间内只有一个按键事件

Question

我检查是否有人按 space 开始 css 转换：

$(document).bind('keyup', function(e) {
    if (e.which == 32) {
        angle = 7200 + (Math.ceil( (Math.random() * 3600) / 45) * 45);
        $("#wheel").css("transform", "rotate(" + angle + "deg)")
    }
})

本次交易耗时10秒

我现在想在 10 秒完成之前阻止新的触发 keyupevent。

我尝试了 ontransitionrun 和 ontransitionend 事件，但这些事件似乎根本没有被触发：

$("#wheel").bind('ontransitionend', function(e) {
    console.log('end');
})

而且我还尝试延迟我的 keyup 功能，但这也不起作用。

那么我如何检查我的转换是否仍然运行或者我如何防止新的 keyup 事件持续 10 秒？

Answer 1

您可以在事件处理程序执行后立即将其删除，而不是在 10 秒后重新附加它：

var keyupHandler = function(e) {
    if (e.which == 32) {
        $(document).off('keyup');
        angle = 7200 + (Math.ceil( (Math.random() * 3600) / 45) * 45);
        $("#wheel").css("transform", "rotate(" + angle + "deg)");
        setTimeout($(document).on('keyup', keyupHandler), 10000);
    }
}
$(document).on('keyup', keyupHandler);

Answer 2

您可以使用 $.debounce 在您的示例中，您可以使用类似的东西：

$(document).keyup( $.debounce( 10*1000, function(e) {
    if (e.which == 32) {
        angle = 7200 + (Math.ceil( (Math.random() * 3600) / 45) * 45);
        $("#wheel").css("transform", "rotate(" + angle + "deg)")
    }
}))

Answer 3

愚蠢的我 - 我只见树木不见森林！

$("#wheel").bind('ontransitionend', function(e) {

当然是错误的，因为它必须是

$("#wheel").bind('transitionend', function(e) {

所以这个按预期工作：

var act = 0
$("#wheel").bind('transitionrun', function(e) {
  act = 1;
})
$("#wheel").bind('transitionend', function(e) {
  act = 0;
})
$(document).bind('keyup', function(e) {
  if (e.which == 32 && act == 0) {
    angle = angle + 7200 + (Math.ceil( (Math.random() * 3600) / 45) * 45);
    $("#wheel").css("transform", "rotate(" + angle + "deg)")
  }
})

感谢您的建议，它们都有效。

特定时间内只有一个按键事件

only one keyup event for certain time

javascript

jquery

onkeyup