减慢 while 循环内的 for 循环（Javascript）

Question

So I'm trying to visualize a sorting algorithm in Vanilla JS and for this I need the actual sorting function to not sort it all in the fraction of a second but to wait eg 250ms after each iteration. This is the Bubble Sort code (which does work):

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
}

Now I researched on how to slow down a loop in JS and tried a couple of different ways. For example:

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
}

Here I tried to use the setTimeout function inside the for-loop which does theoretically work but it does only slow down and display each step for the for-loop but stops after each run instead of looping again (while(swapped))(obviously, but I don't know how to fix it). For each while loop I to press the button again.

I also tried wrapping the whole do-while construction inside the setTimeout and add an additional set Timeout inside the for-loop. That simply crashed my browser. I also tried a couple of other constellations but those also either crashed the browser or didn't sort at all.

Answer 1

setTimeout() creates an asynchronous process but for and while loops normally runs synchronously, so it doesn't work to do it like that. If your environment supports async-await syntax, you can use that to make for and while run asynchronously.

Annotate the function as async , promisify the timeout and then await it, like this:

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
}

If your environment doesn't support async-await , you're going to need to use a more complex approach with callback functions instead of for and while loops.

Keep in mind that an async function will always return a Promise . It's not relevant in this case since your function creates side-effects and doesn't return anything.