I try to make an algorithm visualization project – right now I am implementing visualization of bubble-sort – I’ve got an array of arrays in which each outer array represents one iteration of the algorithm, and each inner array consists of boolean values – swap or no swap neighboring elements in the collection – I have algorithm ready, and sorting is done correctly, right now I wanted to introduce time delays between each swap – as it is visualization program I want the user to see actually what’s going on. Here I stumbled upon a problem – I wanted to use async await with setTimeout but apparently I lack knowledge (I mostly work with java) – columns are not sorted correctly – I would say that setTimeout is incorrectly scheduled in parallel for different iterations, but I am not sure. Code of mine:
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))
}
Results:
With timeout and async await:
Input:
Output
Without timeout and async await:
Input
Output
As requested: I post response from the server:
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) […] }
Objects in the array consists of: (the collection array is redundant and not used – I plan to delete it)
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
>Solution :
You need to resolve the promise or it wouldn’t do the following stuff. Without it, your loop will stay the first step.
That’s the reason why the output is the same as the input.
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);
}
// this is the point
resolve()
}, 100))
}
For more information
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise