为何使用setTimeout后，冒泡排序演示函数仍立即执行？

问题根源 #

1. 同步循环未等待异步操作：bubbleSort是普通同步函数，调用异步的swap时没有添加await，导致循环会一次性执行完所有交换逻辑，不会等待每一次交换后的延迟。
2. setTimeout的await用法错误：setTimeout本身不返回Promise，无法被await；同时你直接执行了updateText()，导致它会立即触发，而非延迟1秒后执行。
3. 函数参数未正确使用：updateText定义了arrayText参数，但实际依赖全局arr，容易引发变量作用域混乱。

修正方案 #

1. 改造bubbleSort为异步函数

添加async关键字，并在调用swap时用await等待交换及延迟完成，让循环按顺序执行：

async function bubbleSort(arr){
    for(var i = 0; i < arr.length-1; i++){
        for(var j = 0; j < arr.length-i-1; j++){
            if(arr[j] > arr[j+1]){
                await swap(arr,j,j+1);
            }
        }
    }
}

2. 修正swap函数的延迟逻辑

用Promise包装setTimeout，让await能正确等待1秒延迟；同时在延迟回调中调用updateText，避免立即执行：

async function swap(arr, a, b){
    // 执行数组元素交换
    const temp = arr[a];
    arr[a] = arr[b];
    arr[b] = temp;
    
    // 包装setTimeout为Promise，实现延迟等待
    await new Promise(resolve => {
        setTimeout(() => {
            updateText(arr);
            resolve();
        }, 1000);
    });
    
    return arr;
}

3. 修复updateText的参数使用

改用传入的数组参数，避免依赖全局变量：

function updateText(array){
    document.getElementById('arrayText').innerHTML = printArray(array);
}

补充printArray示例（若未实现）

如果还没有将数组转为展示文本的函数，可补充：

function printArray(arr){
    return arr.join(' '); // 将数组转为空格分隔的字符串，可根据需求调整格式
}

调用方式

因为bubbleSort是异步函数，调用时可通过then处理完成逻辑：

const demoArray = [7, 3, 5, 2, 9, 1];
bubbleSort(demoArray).then(() => {
    console.log('排序演示完成');
});

内容的提问来源于stack exchange，提问作者athariandre