Algorithm Visualization: An Adventure in Thread Sleeping🔥

Back here dev family, I recently took on a challenge to develop an algorithm visualiser and I started with animating five of the most common sorting algorithms. The project will be an ongoing project as I'm planning to add more features like path finding algorithms and many more.Find it at https://algo-vis-two.vercel.app. Consider visiting it and giving me some inputs and maybe feature requests and challenges I really would appreciate.

The challenge in this project

Apart from learning the actual sorting algorithms and how to integrate that in the user interface another challenge here is animating the whole process of sorting as I needed.

How is it a challenge

I hardcoded the generation of 20 random bars with different heights, and for those of you who know a thing about performance about algorithms you know that some algorithms are faster than other ones even though this is the case, the difference between the execution times of this algorithms is very fast unless you have a really large amount of data and animating the process is very quick that there is little to nothing to see on how items interchange positions in the whole process.

How I first approached the animation and how it worked

At first, I just wrote the sorting algorithms and I would set the state on each iteration of the algorithm and I though it would work which it did but in a very fast way that you couldn't realize what happened. Here is a sample code I had at first(bubble sort):

So basically what I did is passing my bars array to the function and a set to set the new state of the whole array at every step and the currentBar which also allowed me to set the current bar being checked. And what happened is the whole interchanging process took place in a matter of milliseconds and you couldn't know what happened.

How I tackled the challenge

I first thought I had to somehow simulate the sleeping of the thread in js to allow my state to update and be seen before we can move on to the next iteration. Unfortunately, there is no sleep method in javascript and I had to implement my own. So I used the asynchronous approach and promises to do this. I implemented a function from the knowledge caught up from StackOverFlow called Sleep like this:

So, how this works is it called by being awaited again like this:

And as we know await a promise keeps the thread busy until the promise is resolved or rejected and in the implementation of the promise it is resolved after a specified time (ms) and this allows us to see how the elements in the array are being interchanged visually to a speed that our brain doesn't perceive as instant.

There are also many other ways to distract the thread like this one:

function sleep(){
let i = 0;
while(i<10){
setTimeout(()=>{
i++;
},100)
}
}

And there are many others but with this I think anyone can try to think his/her own implementation.

So that was it for sleeping the thread in javascript and it has many applications I just needed it when I was trying to visualise processes and you might also meet a different case scenario but with the need to do this and it'll be helpful.

Like, Share and Comment for the motivation! Thanks.