Preventing a jQuery function from being executed until current one is finished

Question

I have a function in jQuery which is triggered whenever I press any of the arrow keys. The following is the code for the 'up' arrow case, and the other three cases look very similar and are contained within 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 button mash a bunch of arrow keys, each execution of the function only occurs after the previous function call has COMPLETELY finished?

http://stackoverflow.com/questions/7373023/throttle-event-calls-in-jquery — Khanh TO, Jul 25 '15 at 02:18

score 1 · Accepted Answer · answered Jul 25 '15 at 02:29

Many ways to do this. One way could be add them on a queue, where this queue can do only thing at a time. In each function, when its done dequeue it so the next function can run. You could use jquery's queue function: http://api.jquery.com/jquery.queue/

score 0 · Answer 2 · answered Jul 25 '15 at 04:54

It seems you are animating several objects and you want to avoid any key input before all animations have stopped. Try the following changes (highlighted by the 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 to have a global variable keep track of ongoing animations. This value starts at 0, and the keyCheck function will return if this value is >0.
The animationStillGoing will increase before the animation kick in and will decrease when the animation ends. So, if there are three animations still ongoing, this parameter will be 3, if a new one kicks in, it will go to 4, and it will only return to value 0 when all animations are finished. Once at 0, keyCheck will continue to work.

Preventing a jQuery function from being executed until current one is finished

2 Answers2