Prevent jQuery function from executing until current completes
I have a function in jQuery that runs whenever I press any of the arrow keys. Below is the code for the up arrow case, and the other three cases look very similar and are contained in the checkKey function.
document.onkeydown = checkKey;
function checkKey(e) {
var divs = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
e = e || window.event;
if (e.keyCode == '38') {
for (i = 0; i < divs.length; i++){
var tmp = document.getElementById(divs[i]);
var coord = $(tmp).position();
if ((Math.abs(embargo_top - coord.top) < 115) && (Math.abs(embargo_left - coord.left) < 15)){
if(embargo_top < coord.top){
embargo_top = coord.top;
embargo_left = coord.left;
$(tmp).animate({
'top': (parseInt($(tmp).css('top'), 10) - 100) + "px"
}, 500);
break;
}
}
}
checkIfWinner();
}
How do I handle these events so that if I press the bunch of arrow keys button, each function execution only happens after the previous function call has FULLY finished?
source to share
There are many ways to do this. One way would be to add them to a queue, where that queue can only do a thing at a time. In each function, when done, deactivates it so that the next function can work. You can use jquery queue function: http://api.jquery.com/jquery.queue/
source to share
You seem to be animating multiple objects and you want to avoid entering a key before all animations have stopped. Try the following changes (highlighted with arrows ==>):
document.onkeydown = checkKey;
==> var animationStillGoing = 0;
function checkKey(e) {
var divs = ["one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen"];
e = e || window.event;
==> if (animationStillGoing>0) {return}
if (e.keyCode == '38') {
for (i = 0; i < divs.length; i++){
var tmp = document.getElementById(divs[i]);
var coord = $(tmp).position();
if ((Math.abs(embargo_top - coord.top) < 115) && (Math.abs(embargo_left - coord.left) < 15)){
if(embargo_top < coord.top){
embargo_top = coord.top;
embargo_left = coord.left;
animationStillGoing++;
$(tmp).animate({
'top': (parseInt($(tmp).css('top'), 10) - 100) + "px"
==> }, 500,function(){animationStillGoing--;});
break;
}
}
}
checkIfWinner();
}
What these changes do is have a global variable that keeps track of the current animation. This value starts at 0, and the keyCheck function will return if this value is> 0.
AnimationStillGoing will increase before the animation starts and shrink when the animation ends. So, if three more animations continue, this parameter will be 3, if a new one is involved, it will jump to 4, and it will revert to 0 when all animations are complete. Once at 0, keyCheck will continue to run.
source to share