冒泡排序可视化：async/await+setTimeout导致排序异常问题排查

我正在开发一个算法可视化项目，目前实现了冒泡排序的可视化功能。从服务器获取的数组中，外层数组对应算法的每一轮迭代，内层数组由布尔值组成，用于标记是否需要交换相邻元素。算法逻辑本身无问题，不添加时间延迟时排序结果正常，但为了让用户直观查看排序过程添加延迟后，柱状图排序结果出现异常。我尝试用async/await结合setTimeout实现延迟，但因主要使用Java，对该机制不熟悉，推测是setTimeout在迭代中的调度出现错误。

相关代码 #

async function visualiseAlgorithm(responseFromServer) {
    for (const iteration of responseFromServer.data) {
        await displayIteration(iteration.swapsRecord);
    }
}

async function displayIteration(swapsForIteration) {
    let idx = 0;
    for (const shouldSwap of swapsForIteration) {
        await drawColumns(shouldSwap, idx++).then(res => {
            context.clearRect(0, 0, canvas.width, canvas.height);
            drawBaseLine();
            columnsArray.forEach(column => column.draw());
        });
    }
}

function drawColumns(toSwap, index){
    return new Promise(resolve => setTimeout(() => {
        if(index > 1) columnsArray[index - 1].setColor("grey");
        let color;
        if(toSwap){
            color = "red";
            let temp = columnsArray[index].getHeight();
            columnsArray[index].setHeight(columnsArray[index + 1].getHeight());
            columnsArray[index + 1].setHeight(temp);
        }

    }, 100))
}

结果对比 #

添加timeout和async/await时： #

输入：
输出：

不添加timeout和async/await时： #

输入：
输出：

服务器返回数据 #

Array(37) [ {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, … ]
0: Object { swapsRecord: [], collection: (45) […] }
1: Object { swapsRecord: (44) […], collection: (45) […] }
2: Object { swapsRecord: (44) […], collection: (45) […] }
3: Object { swapsRecord: (44) […], collection: (45) […] }
4: Object { swapsRecord: (44) […], collection: (45) […] }
5: Object { swapsRecord: (44) […], collection: (45) […] }
6: Object { swapsRecord: (44) […], collection: (45) […] }
7: Object { swapsRecord: (44) […], collection: (45) […] }
8: Object { swapsRecord: (44) […], collection: (45) […] }
9: Object { swapsRecord: (44) […], collection: (45) […] }
10: Object { swapsRecord: (44) […], collection: (45) […] }
11: Object { swapsRecord: (44) […], collection: (45) […] }
12: Object { swapsRecord: (44) […], collection: (45) […] }
13: Object { swapsRecord: (44) […], collection: (45) […] }
14: Object { swapsRecord: (44) […], collection: (45) […] }
15: Object { swapsRecord: (44) […], collection: (45) […] }
16: Object { swapsRecord: (44) […], collection: (45) […] }
17: Object { swapsRecord: (44) […], collection: (45) […] }
18: Object { swapsRecord: (44) […], collection: (45) […] }
19: Object { swapsRecord: (44) […], collection: (45) […] }
20: Object { swapsRecord: (44) […], collection: (45) […] }
21: Object { swapsRecord: (44) […], collection: (45) […] }
22: Object { swapsRecord: (44) […], collection: (45) […] }
23: Object { swapsRecord: (44) […], collection: (45) […] }
24: Object { swapsRecord: (44) […], collection: (45) […] }
25: Object { swapsRecord: (44) […], collection: (45) […] }
26: Object { swapsRecord: (44) […], collection: (45) […] }
27: Object { swapsRecord: (44) […], collection: (45) […] }
28: Object { swapsRecord: (44) […], collection: (45) […] }
29: Object { swapsRecord: (44) […], collection: (45) […] }
30: Object { swapsRecord: (44) […], collection: (45) […] }
31: Object { swapsRecord: (44) […], collection: (45) […] }
32: Object { swapsRecord: (44) […], collection: (45) […] }
33: Object { swapsRecord: (44) […], collection: (45) […] }
34: Object { swapsRecord: (44) […], collection: (45) […] }
35: Object { swapsRecord: (44) […], collection: (45) […] }
36: Object { swapsRecord: (44) […], collection: (45) […] }

数组对象结构（collection为冗余字段，计划删除） #

Object { swapsRecord: (44) […], collection: (45) […] }
collection: Array(45) [ 61, 53, 35, … ]
swapsRecord: Array(44) [ false, true, true, … ]
0: false
1: true
2: true
3: false
4: true
5: true
6: true
7: false
8: true
9: true
10: true
11: true
12: true
13: true
14: true
15: true
16: true
17: true
18: true
19: true
20: true
21: true
22: true
23: true
24: true
25: true
26: true
27: true
28: true
29: true
30: true
31: true
32: true
33: true
34: true
35: true
36: true
37: true
38: true
39: true
40: false
41: true
42: true
43: true
length: 44

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