Javascript 如何在重新调用函数之前等待动画完成

我使用递归将一个函数重复多次。每次函数运行时，都会出现持续600毫秒的动画，因此我尝试使用setTimeout延迟重新调用函数，以便在动画完成之前不会重新调用该函数。出于某种原因，我所做的事情导致了一些奇怪的事情：使用我的检查器，我可以看到函数正在运行，所有适当的值都在更改，但是新的值永远不会被呈现

如果有人对如何在重复该功能之前等待动画完成有任何其他建议，也可以！提前谢谢

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);

}

var run\u程序=函数（）{
for（var j=0；j

您应该使用jQuery的

.animate（）

另一种方法是一起去掉for循环，在递归调用中只增加索引

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

var run\u程序=函数（var索引）{
如果（索引类型==“未定义”）{
//这意味着这是函数第一次运行（即run_program（））
指数=0；
}
if（索引<程序长度）{
//尚未达到初始for循环的边界
//运行其他函数检查
$（'.reader'）。设置动画({
左：“+=50”
}，600，函数（）{
运行_程序（索引+1）；
});
}
}

我试过了，但似乎发生的情况是，在我的回调函数等待调用时，for循环继续循环，给我带来了问题。因此，我认为另一种选择是将索引变量传递给函数，并摆脱

for

循环。然后在每次回调之前增加索引并再次将其传递给函数。这样就摆脱了for循环的问题。我将发布更多详细信息。@snookieordie有关如何避免for循环问题的详细信息，请参阅我的编辑

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