JavaScript 代码同时运行且不等待[重复]

Question

这个问题在这里已经有了答案：

sleep() 的 JavaScript 版本是什么？ (87 个回答)

8 小时前关闭。

我正在 javascript 中制作排序可视化工具。 这是排序算法之一的示例：选择排序但是当我运行代码时，即使选择排序 Visualizer.compare 和 Visualizer.swap 函数有 1 秒的暂停，数组也会立即排序而不是暂停。 我认为这是因为 javascript 运行异步，因为如果我改为将将条形高度交换为超时的代码运行正常，除非在超时时间过去后所有高度同时更改，这很奇怪

所有代码都是通过向一个按钮添加一个点击事件来运行的

function selectionSort(array, visualizer) {
    let arrayLength = array.length;
    let minIndex;

    // loop through the array and sort each value array
    for (let i = 0; i < arrayLength; i++) { // loop through all indexes of array   
        minIndex = i; // assume that element with i index is minimum

        // Find the minimum element in unsorted array 
        for (let j = i + 1; j < arrayLength; j++) { // loop through indexes of unsorted elements
    
            visualizer.compare(i, j); // run the comparing visualizer
            if (array[minIndex] > array[j]) { // check if the element of minIndex is larger than value of the index j
                minIndex = j; // set minIndex to j
            }
        }

        visualizer.swap(minIndex, i); // run the swapping visualizer
        let temp = array[i]; // Swap the minimum element with element of index i 
        array[i] = array[minIndex];
        array[minIndex] = temp;
        
        visualizer.finished(i); // change the color of the bars at index minIndex to the finished color
    }
}

export {selectionSort, generateArray};

这是 Visualizer.js 文件中交换 function 的代码

// change the colors of 2 bars to the swapping color and swap
export function swap(index1, index2) {
    let bar1Style = arrayBars()[index1].style;
    let bar2Style = arrayBars()[index2].style;

    // save the previous colors
    let bar1Color = bar1Style.backgroundColor;
    let bar2Color = bar2Style.backgroundColor;  
    
    // change the colors to the comparing color
    bar1Style.backgroundColor = swapColor;
    bar2Style.backgroundColor = swapColor;
    
    // swap the heights of the bars
    pause();
    let bar1height = bar1Style.height;
    let bar2height = bar2Style.height;
    bar1Style.height = bar2height;
    bar2Style.height = bar1height;
    pause(); 

    // change the colors back to their original colors
    bar1Style.backgroundColor = bar1Color;
    bar2Style.backgroundColor = bar2Color;
}


// some helper functions that are in the visualizer.js file
export function arrayBars() {
    return document.getElementsByClassName('array-bar');
}
// sleeps for pauseTime seconds 
export function pause() {
    setTimeout(function() {}, pauseTime);    
}

Answer 1

也许使用基于承诺的延迟和async/await 。

 function delay(time) { return new Promise(res => { setTimeout(() => res(), time); }); } async function main() { console.log('First... waiting for two seconds'); await delay(2000); console.log('Second... waiting for five seconds'); await delay(5000); console.log('Done'); } main();

Answer 2

只需对您的 function 使用 async 和 await ，这样它就会等到您的 function 返回的 promise 得到解决。

看看这段代码：

async function f() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done!"), 1000)
  });

  let result = await promise; // wait until the promise resolves (*)

  alert(result); // "done!"
}

f();