Замедлить на -l oop внутри, пока-l oop (Javascript)

Question

Итак, я пытаюсь визуализировать алгоритм сортировки в Vanilla JS, и для этого мне нужна реальная функция сортировки, чтобы сортировать ее не за доли секунды, а ждать, например, 250 мс после каждой итерации. Это код Bubble Sort (который работает):

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
}

Теперь я исследовал, как замедлить работу al oop в 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
}

Здесь я попытался использовать функцию setTimeout внутри for-l oop, которая теоретически работает, но она только замедляет и отображает каждый шаг для for-l oop но останавливается после каждого запуска вместо повторения цикла (while (swapped)) (очевидно, но я не знаю, как это исправить). Для каждого времени, пока l oop I снова нажимает кнопку.

Я также пытался обернуть всю конструкцию do-while внутри setTimeout и добавить дополнительный набор Timeout в for-l oop. Это просто разбило мой браузер. Я также попробовал несколько других созвездий, но они либо сбивали браузер, либо не сортировали вообще.

Answer 1

setTimeout() создает асинхронный процесс, но циклы for и while, как правило, работают синхронно, поэтому так не получается. Если ваша среда поддерживает синтаксис async-await, вы можете использовать его для асинхронной работы for и while.

Аннотируйте функцию как async, , обещайте время ожидания, а затем 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. В данном случае это не актуально, поскольку ваша функция создает побочные эффекты и ничего не возвращает.