Changing colors in array elements using javascript

Question

I'm new to javascript. I'm working on sorting visualization and I want to change the color of array elements one by one. I tried to do it but they all change at the same time layout

    function selectionSort(main_arr)
{
    var arr_slots = document.getElementById("draw-area").childNodes;
    for (var i=0; i<main_arr.length; i++)
    {
    arr_slots[i].style.backgroundColor="red";
       (function(index)
       {
           setTimeout(function()
           {
               arr_slots[index].style.backgroundColor="#f2f2f2";
           },1000);
       })(i)
       

    }
}

Answer 1

Your setTimeout is set to go off after 1 second for all items in your loop. This is not cumulative, so basically the loop will complete quickly (almost instantly from your pointof view) with "i" number of setTimeouts, all firing after one second.

You need to use "i" to set the timer to increment to whatever time you need (also you don't need to wrap your setTimeout in a anonymous self executing function. So something like this might work

function selectionSort(main_arr) {
    var arr_slots = document.getElementById("draw-area").childNodes;
    for (var i=0; i < main_arr.length; i++) {
        arr_slots[i].style.backgroundColor="red";
        setTimeout(function() {
            arr_slots[index].style.backgroundColor="#f2f2f2";
        }, i * 1000);
    }
}

This will make each timer fire one second after the other, starting at 0 seconds. The timing can be adjusted in a few ways

i * 100 // every tenth of a second
(i * 100) + 2000 // every tenth of a second starting after 2 seconds

You could also add easing, but I won't go into that here (mostly because I can't spin one off the top of my head)

This type of thing is usually handled pretty well using css potentially, or if you investigate a library like animejs, it makes staggering changes to elements pretty easy.

Also have a look at document.querySelectorAll, so you could use it like

var array_slots = document.querySelectorAll("#draw-area > *");
// or whatever the css selector is
array_slots.forEach(function(element) {
    // element returns the html element in the array_slots list
    // do whatever code you need here 
});

Hope that helped.