Javascript 减慢2个嵌套循环的速度

我正在尝试构建我的第一个web应用程序，它将可视化排序算法。我目前正在研究冒泡排序算法，但我在减慢冒泡排序循环的执行速度方面遇到了问题。 我尝试使用setTimeout（）函数，但显然，在嵌套循环中使用它并不容易。 下面的代码运行良好，但是如果我在嵌套循环中添加setTimeout，那么它只会执行外部while循环的第一次迭代。这是可以理解的，因为整个while循环是即时执行的，并且没有真正意识到有人已经取消了其“主体执行”的同步

我尝试将外部循环放入setTimeout函数中，但我找不到检索实际时间的方法，因为我尝试使用j值来计算它，但它仅在for循环中可用

有没有关于如何以相关方式减慢两个循环的执行速度的想法

 bubbleSort(){
        var len = this.numberOfElements;
        var sorted = false;
        var i = 0;
        while(!sorted){
            sorted = true;
            for(let j = 0 ; j < len - i - 1; j++){ 
                setTimeout( () => {
                    if (this.valuesAndPillarsObject[j].value > this.valuesAndPillarsObject[j + 1].value) {
                        //swap graphical representation of the value
                        this.swapPillars(this.valuesAndPillarsObject[j].pillar, this.valuesAndPillarsObject[j+1].pillar);
                        // swap values
                        var temp = this.valuesAndPillarsObject[j].value;
                        this.valuesAndPillarsObject[j].value = this.valuesAndPillarsObject[j+1].value;
                        this.valuesAndPillarsObject[j + 1].value = temp;
                        sorted = false;
                    }
                }, j*40);
            }
            i++;
        }
        return this.valuesAndPillarsObject;
    }

bubbleSort（）{
var len=this.numberOfElements；
var=false；
var i=0；
而（！排序）{
排序=真；
对于（设j=0；j{
if（this.valuesAndPillarsObject[j].value>this.valuesAndPillarsObject[j+1].value）{
//交换值的图形表示形式
this.swapPillars（this.valuesAndPillarsObject[j].支柱，this.valuesAndPillarsObject[j+1].支柱）；
//交换值
var temp=this.valuesAndPillarsObject[j].value；
this.valuesAndPillarsObject[j]。value=this.valuesAndPillarsObject[j+1]。value；
此.valuesAndPillarsObject[j+1].value=temp；
排序=假；
}
}，j*40）；
}
i++；
}
返回此.values和PillarObject；
}

for循环将在调用第一个setTimeout回调之前完成！ 即使超时为1ms或0ms。 阅读一些关于JavaScript的内容，了解JavaScript中的工作原理

更新：最简单的解决方案是在for循环中使用延迟。 就像威克那样。 但在这里，我将保留其他解决方案

您可以使用函数并再次调用它来演示循环，而不是普通for循环

//根据需要更改代码
常量sleep=（t）=>（{then:（r）=>setTimeout（r，t）}）
常数len=10
//根据你的需要改变慢行
const slowFor=async（i，j）=>{
//你想在这里干什么就干什么
等待睡眠（5000）
如果（j==len）返回；
log（“休眠后调用下一个循环”）；
慢波（i，j+1）
}
slowFor（0,0）

您不希望只在循环中安排一系列超时。只要耽搁一次，他们都会完成的。您想让每个超时开始下一个超时。要继续使用循环控制流，需要使用async和wait

走错路

for（设i=0；i<5；++i）{
setTimeout（（）=>{console.log（`step${i}`）}，1000）；
}
console.log（'finished'）
40
为40毫秒。如果你告诉24个人“请在一小时内回来”，你认为离最后一个人回来还有24小时吗？你可能会惊讶地看到，所有24人在一小时后就回来了。在循环中调用setTimeout也是一样。这个问题将减速的概念与异步编程的概念混为一谈。这实际上是一个关于异步的问题。我有点希望问题中没有出现“慢下来”这个词。即使是20k+rep@Taplar也在其中上钩了。@Wyck你忽略了他们设定的超时时间不是设定的时间量这一点。它由
j*40
导出。因此，虽然for循环将创建所有（比方说24）超时，但如果用户输入的不是
40
，而是
5000
，则第一个超时将在5秒后执行。10秒后的第二个，依此类推。这可能不是他们的全部问题，但考虑到希望以渐进的方式推迟暂停的执行，这是一种方法。可以说这不是一个好方法，但它是一种方法。