如何等到动画完成后再调用函数

Question

I'm using recursion to repeat a function multiple times. Each time the function is run, an animation lasting 600 milliseconds will occur, so I'm trying to use setTimeout to delay re-calling the function so that it won't be re-called until the animation has completed. For some reason what I have is resulting in some weird stuff: Using my inspector I can see that the function is running and all the appropriate values are changing, but the new values never get rendered.

If anyone has any other suggestions for how to wait until an animation is completed before repeating the function, that would also do! Thanks in advance!

var run_program = function() {

    for (var j=0; j< program.length; j++) {    //loops through the different lines of turingcode

        if (reader.state === program[j].state && reader.scanning === program[j].scanning) { //if there is a line of turingcode for the readers current state and scanning values.

            cellArray[reader.location].content = program[j].print; //change the content of the current cell to the new value

            reader.location += 1; //increase the value of the reader's location

            $(".reader").animate({"left":"+=50px"}, 600); //move the div to the right so it appears to be under the next cell

            reader.scanning = cellArray[reader.location].content; //update the readers scanning value to be the value of the new cell

            reader.state = program[j].next_state; // update the state of the reader to that specified by the line of turingcode

            break;

        }

        else if (j === $scope.program.length-1) { //if there is no line of turingcode for the readers current state and scanning values, and j has looped through the entire list of turingcode lines

            return;  //halt the function

        }

    }

    setTimeout(run_program, 600);

}

Answer 1

You should use the function callback offered by jQuery's .animate() http://api.jquery.com/animate/

var run_program = function() {
  $( ".reader" ).animate({
    left: "+=50"
  }, 600, function() {
    // Do something after the Animation is complete.
  });
}

Another method would be to get rid of the for loop all together, and in your recursive call just increment the index.

var run_program = function(var index) {
    if(typeof index === "undefined") {
        //this means it is the first time the function is being run (ie run_program())
        index = 0;
    }

    if (index < program.length) {
        //haven't reached the bounds of the initial for loop
        //run your other function checks

        $('.reader').animate({
            left: "+=50"
          }, 600, function() {
               run_program(index+1);
          });
    }
}