javascript - 减慢 while 循环内的 for 循环 (Javascript)

Question

所以我试图在 Vanilla JS 中可视化排序算法，为此我需要实际的排序函数，不要在不到一秒的时间内对所有内容进行排序，而是要等待，例如每次迭代后 250ms。这是冒泡排序代码(确实有效):

function sortArray(){
    let arr = inputArray; //arr is the array to get sorted.
    let l = arr.length;
    let swapped;
//---Bubble sort---
    do {
        swapped = false;
        for (let i = 0; i < l-1; i++) {
            if (arr[i] > arr[i+1]){
                let temp = arr[i];
                arr[i] = arr[i+1];
                arr[i+1] = temp;
                swapped = true;
            }
        }
    }while (swapped);
//---Bubble sort---

    display.innerText = JSON.stringify(arr); //Display the sorted Array to the user
}

现在我研究了如何减慢 JS 中的循环速度，并尝试了几种不同的方法。例如:

function sortArray(){
    let arr = inputArray; //arr is the array to get sorted.
    let l = arr.length;
    let swapped;
//---Bubble sort---
    do {
        swapped = false;
        for (let i = 0; i < l-1; i++) {
            setTimeout(() =>{
                if (arr[i] > arr[i+1]){
                    let temp = arr[i];
                    arr[i] = arr[i+1];
                    arr[i+1] = temp;
                    swapped = true;
                    n++;
                }
                arrayDisplay.innerText =JSON.stringify(arr);
            },250 *i);
        }
    }while (swapped);
//---Bubble sort---

    display.innerText = JSON.stringify(arr); //Display the sorted Array to the user
}

在这里，我尝试在 for 循环中使用 setTimeout 函数，理论上它确实有效，但它只会减慢并显示 for 循环的每个步骤，但在每次运行后停止而不是再次循环(while(交换)) (显然，但我不知道如何解决它)。对于每个 while 循环，我都会再次按下按钮。

我还尝试将整个 do-while 结构包装在 setTimeout 内，并在 for 循环内添加一个额外的 set Timeout。这让我的浏览器崩溃了。我还尝试了其他几个星座，但它们要么使浏览器崩溃，要么根本没有排序。

Answer 1

setTimeout() 创建一个异步进程，但 for 和 while 循环通常同步运行，因此它不起作用那。如果您的环境支持 async-await 语法，您可以使用它来使 for 和 while 异步运行。

将函数注释为异步， promise 超时，然后等待它，如下所示:

async function sortArray(){
    let arr = inputArray; //arr is the array to get sorted.
    let l = arr.length;
    let swapped;
//---Bubble sort---
    do {
        swapped = false;
        for (let i = 0; i < l-1; i++) {
            await new Promise(resolve => setTimeout(() =>{
                if (arr[i] > arr[i+1]){
                    let temp = arr[i];
                    arr[i] = arr[i+1];
                    arr[i+1] = temp;
                    swapped = true;
                    n++;
                }
                arrayDisplay.innerText =JSON.stringify(arr);
                resolve();
            }, 250));
        }
    }while (swapped);
//---Bubble sort---

    display.innerText = JSON.stringify(arr); //Display the sorted Array to the user
}

如果您的环境不支持 async-await，您将需要使用更复杂的回调函数方法，而不是 for 和 while 循环。

请记住，async 函数将始终返回 Promise。在这种情况下它不相关，因为您的函数会产生副作用并且不会返回任何内容。