Question

I have a simple application where a user clicks on an area, and the counter moves a number of steps. I am using an console-like output window to alert the user of any changes. For moving the counter, I am using a for loop to run the jQuery animations like so:

function glideMove() {
    //for length of moveNum, animate square step
    for (var i=1; i <= moveNum; i++) {
        $("#thingToAnimate").animate();
    }// end for loop
    //set squareOn to moveNum
    squareOn += moveNum;
}// end glideMove

I call this function from a different number of places in the code, like here:

function moveCounter() {
    $("#thingToAnimate").append("Moving...  ").scrollTop(BIG_NUMBER);
    //if square will be last, finish game
    if (squareOn + moveNum>= END_SQUARE) {
        finishThis();
    } else {
        glideMove();
        $("#thingToAnimate").append("you are now on square: " + squareOn + ".<\/br >").scrollTop(BIG_NUMBER);//not
        //roll again
        $("#thingToAnimate").append("Roll again. <br \/>").scrollTop(BIG_NUMBER);
    }// end else if
}// end moveCounter

What I want is an alert to the output that the moving animation has begun. Once it has ended, I want an alert to the output that it has finished moving an is ready to continue.

But my problem is, all the alerts to the output run while the animation is still taking place.

What I would like is for the sequence of jQuery animations to run, and have the rest of the program wait on that sequence to complete. This function is called from a number of different places in the code, with different results after the function is complete

Answer 1

You should subscribe to the complete event for your animate() call.

function glideMove(callback) {
    //for length of moveNum, animate square step
    for (var i=1; i <= moveNum; i++) {
        //----- New Code -----
        var options = {};
        if (i === moveNum)
            options.complete = callback;
        $("#thingToAnimate").animate({}, options);
        //----- New Code -----
    }// end for loop
    //set squareOn to moveNum
    squareOn += moveNum;
}// end glideMove

And now use the glideMove function where required with your own on demand function when animation completes

function moveCounter() {
    $("#thingToAnimate").append("Moving...  ").scrollTop(BIG_NUMBER);
    //if square will be last, finish game
    if (squareOn + moveNum>= END_SQUARE) {
        finishThis();
    } else {
        glideMove(function() {
            //specific code on this specific 'glideMove' animation
        });
        $("#thingToAnimate").append("you are now on square: " + squareOn + ".<\/br >").scrollTop(BIG_NUMBER);//not
        //roll again
        $("#thingToAnimate").append("Roll again. <br \/>").scrollTop(BIG_NUMBER);
    }// end else if
}// end moveCounter