减慢2个嵌套循环 错误的方式正确的方式

如何解决减慢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;
    }

解决方法

您不想只安排一个循环超时。只需一个延迟，他们都将完成。您希望每个超时都开始下一个超时。要继续使用循环来控制流量，您需要使用 async 和 await 。

错误的方式

\xab

正确的方式

\xag

,

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

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

您可以使用function并再次调用它来演示一个循环，而不是普通的for循环。

// change the code as your needs
const sleep = (t) =>  ({ then: (r) => setTimeout(r,t) })
const len =10

 // change slowFor for your needs
const slowFor= async (i,j)=>{
    // do what you want here
    await sleep(5000)
    if(j == len) return ;
    console.log("after sleeping call next loop");
    
    slowFor(i,j+1)

}


slowFor(0,0)

在大型数组上运行时要注意最大调用堆栈。

或者您可以将bubbleSort函数转换为生成器函数，以便您可以随时随地将其停止。

更改代码以适合您的需求

function* bubble() {    
    
    for(let i = 1 ; i<10 ; i++ ){
        for(let j=0 ; j<i ; j++,yield){
            console.log("hellow from for");
        }
    }

}

const genBubble = bubble()

genBubble.next()
setInterval(() => {
    
    genBubble.next()

},5000);