Javascript:如何使用 setTimeout 延迟确保多个嵌套循环的顺序执行？

Question

我一直在查找许多关于 setTimeout() 和循环延迟的 SO 帖子，但一直无法找到可行的解决方案。我正在浏览器中对一些数据进行动画演示，其中我需要多次重绘相同的序列，事件以特定顺序发生，包括带有延迟的内部循环。就像这样:

for (var pass = 1; pass <= passes; pass++) {

    // 1. Prep some data, update DOM (must happen *before* inner loop)

    // 2. Run inner loop with delays (multiple DOM updates...)
    (function loopWithDelay() {
        setTimeout(function() {
            // Iterate on data
            // Update DOM on each iteration
            if ( !condition() ) { 
                loopWithDelay(); 
            }
        }, 250);   // delay at each iteration
    })(); 

    // 3. Do wrap-up calcs, update DOM (must happen *after* above loop)

}   // If more passes remain, repeat..

因此，我能够延迟内部循环(第 2 部分)的迭代，但是由于它是非阻塞的，因此第 3 部分立即执行，因此父循环无法正常工作。我在某种程度上理解 Javascript 的异步/非阻塞性质，但无法完全理解如何干净地执行这样的多序列(或实际上让它工作!)希望针对这种特殊情况提供一些建议。

Answer 1

这样做(我称之为callbacl循环):

function outerloop(pass, passes) {
    if (pass > passes) return;
    // 1. Prep some data, update DOM (must happen *before* inner loop)

    // 2. Run inner loop with delays (multiple DOM updates...)
    (function loopWithDelay() {
        setTimeout(function () {
            // Iterate on data
            // Update DOM on each iteration
            if (!condition()) {
                loopWithDelay();
            } else {
                outerloop(pass++, passes);
            }
        }, 250); // delay at each iteration
    })();

    // 3. Do wrap-up calcs, update DOM (must happen *after* above loop)

}
outerloop(1, passes);