是否可以暂停while循环直到动画结束

我正在尝试运行一个包含动画的while循环。我希望while循环暂停，让动画结束，然后继续。

这不是我实际的代码，但我相信它涉及到了问题：

var counter = 0;
while (counter < 2) {
    $(".one").animate({"left":"+=50px"}, "slow", function() {
        counter++;
    });
};

这会使我的浏览器崩溃，因为它不会等待动画完成（因此也不会等待计数器增加），然后再继续执行while循环。提前感谢！

https://jsfiddle.net/uhmctey6/

编辑

感谢大家解释为什么这是不可能的。然而，我仍然不确定如何做我需要的事情，由于我没有使用实际的代码作为示例，我不确定建议的解决方案是否有帮助。

这是我真正想做的：我正在制作一台图灵机器，它有一个阅读器和一组可以读取的细胞。在运行这个函数时，我想搜索图灵代码行的列表，看看其中一行是否与阅读器的当前状态和阅读器正在扫描的当前单元格的内容相匹配。如果有匹配，我希望读者做出相关图灵代码行指定的一系列更改，然后视觉上移动到下一个单元格，只有在这个动画完成之后，通过搜索图灵代码列列表来重新开始该过程，看看是否有与读者的新状态匹配的内容，等等。

我知道使用while循环无法实现这一点，但有没有其他方法可以做到这一点？非常感谢！

var run_program = function() {
    while (true) {
        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"}, "slow"); //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
            }
        }
    }
}