How to show / hide images randomly at regular intervals in javascript by shuffling the array?

How to show / hide images randomly at regular intervals in javascript by shuffling the array?

I had one requirement in one of my projects that I had an image which I had to show randomly in 4 places (div) in my webpage at regular intervals using javascript. I had asked this problem in stackoverflow. I got good help from a guy named "Hiral" there. With his/her help, I was able to implement this functionality. For implementing my functionality, I am shuffling an array and using javascript setInterval() and clearInterval() methods. Let me explain you my requirement and solution. Maybe you encounter similar requirement in future, then it might be helpful to you!

I have following 4 divs (bulb1, bulb2, bulb3, bulb4) and the image bulb.png in images folder of my project.

<div id="bulb1" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb2" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb3" class="lightbulb"><img src=".\images\bulb.png" /></div>

<div id="bulb4" class="lightbulb"><img src=".\images\bulb.png" /></div>

Initially, I will hide all these divs by calling my following function:

function hideBulbImages()

{

        document.getElementById('bulb1').style.visibility = "hidden";

        document.getElementById('bulb2').style.visibility = "hidden";

        document.getElementById('bulb3').style.visibility = "hidden";

        document.getElementById('bulb4').style.visibility = "hidden";

}

Now lets say I have an html button on the click of which I am calling below function showBulbImages. As I said I have 4 divs (places in html page) where I have to light the bulb randomly, so I am shuffling the array "myArray" in the below function so that array gets randomized by calling the function "shuffleArray". When array gets shuffled or randomized, I use javascript setInterval() method to turn on the visibility of bulbs randomly at regular intervals, 1 second in my case. When setInterval() method runs 4 times, I call clearInterval() to stop the show.

function showBulbImages()

    { 

        var blink_count = 0;

        var myArray = ['1', '2', '3', '4'];

        var randomArray = shuffleArray(myArray)

        var blink_the_bulbs = setInterval(function() {      

            var blinking_bulb = "bulb" + randomArray[blink_count];

            document.getElementById(blinking_bulb).style.visibility = "visible";

            blink_count+=1;

            if (blink_count > 3) 

            {

                 clearInterval(blink_the_bulbs);

            }

        }, 1000);

    }

    function shuffleArray(array) 

    {

        for (var i = array.length - 1; i > 0; i--) 

        {

            var j = Math.floor(Math.random() * (i + 1));

            var temp = array[i];

            array[i] = array[j];

            array[j] = temp;

        }

        return array;

    }