Question

我检查是否有人按空间开始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秒。

我现在想要在10s完成之前阻止新的被解雇的keyupevent。

我尝试过ontransitionrun和ontransitionend上的活动，但这些似乎根本没有被解雇：

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

我也试图延迟我的键盘功能，但这也不起作用。

那么我该如何检查我的转换是否仍在运行，或者如何在10秒内阻止新的keyup事件呢？

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)")
  }
})

感谢您的建议，两者都有效。

在一定时间内只有一个keyup事件

3 个答案: