减慢while循环中的for循环（Javascript）答案

【问题标题】：Slow down for-loop inside while-loop (Javascript)减慢while循环中的for循环（Javascript）
【发布时间】：2020-03-24 12:07:03
【问题描述】：

所以我试图在 Vanilla JS 中可视化排序算法，为此我需要实际的排序函数，而不是在几分之一秒内全部排序，而是等待，例如每次迭代后 250 毫秒。这是冒泡排序代码（确实有效）：

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(swapped)）（显然，但我不知道如何解决它）。对于每个while循环，我再次按下按钮。

我还尝试将整个 do-while 构造封装在 setTimeout 中，并在 for 循环中添加一个额外的 set Timeout。那简直让我的浏览器崩溃了。我还尝试了其他几个星座，但这些星座要么导致浏览器崩溃，要么根本没有排序。

【问题讨论】：

标签： javascript loops sorting

【解决方案1】：

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

将函数注释为async，promisify超时，然后await它，像这样：

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。在这种情况下它不相关，因为您的函数会产生副作用并且不会返回任何内容。

【讨论】：