I am making a sorting visualizer in javascript. This is a example of one of sorting algorithms: selection sort But when I run the code even if the Selection sort visualizer.compare and visualizer.swap functions have 1 seconds pauses the array is sorted instantly instead of pausing. I think this is because javascript runs asynchrony beacuse if I instead make the code that swaps the heights of the bars into a timeout it runs like normal except after the timeout time has passed all of the heights are changed at the same time which is weird
all of the code is run by adding a on click event to a button that runs the selectionSort function when clicked (github code https://github.com/Jalrux/sorting-visualizer)
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};
This is the code for the swap function in visualizer.js file
// 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);
}
Maybe use a promise-based delay with 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();