only one keyup event for certain time

Question

I check if someone's pressing space to start a css transition:

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

This transaction takes 10s.

I now want to prevent a new fired keyupevent before the 10s are done.

I tried with events ontransitionrun and ontransitionend, but these don't seem to be fired at all:

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

And I also tried to delay my keyup function, but that does not work, too.

So how can I either check if my transition is still running or how can I prevent a new keyup event for 10 seconds?

Answer 1

Stupid me - I didn't see the wood for the trees!

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

is of course wrong, as it has to be

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

So this one works as expected:

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

Thanks for your suggestions, which both are working.