CODEWITHSUNDEEP
javascripthtmlcss
cheezy
cheezy

Reputation: 456

Change Style of Single Element Multiple Times in Same Function (only latest style shown at exit of function)

I've got a setup of multiple images stacked on top of each other (image1 = normal icon, image2 = highlighted icon).

My objective is to highlight the icon, do processing, then set the icon back to normal. Also, to process as fast as possible. The bottleneck is the workarounds to get the "highlight" to show up.

To accomplish this, I'm just switching the .style.visibility = {"hidden", "visible"}

The behavior that I'm seeing is that only the latest style is shown, and it doesn't update until the function exits. From my research on SO, I've found the following:

I've attached a quick sample code to demonstrate that only the last style is shown

<!doctype html>
<head>
<title>test redraw</title>
</head>
<body>
    <img id="logo"
        src="data:image/png;base64, iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
    9TXL0Y4OHwAAAABJRU5ErkJggg=="
        alt="Red dot from wikipedia" /></img>


    <script>
        function pausecomp(ms) {
            ms += new Date().getTime();
            while (new Date() < ms) {
            }
        }
        function hide_then_show() {
            var id = document.getElementById("logo");
            pausecomp(1000);
            id.style.display = "none";
            id.parentNode.style.display = "none";
            id.parentNode.style.display = "block";
            pausecomp(1000);
            id.style.display = "block";
            id.parentNode.style.display = "none";
            id.parentNode.style.display = "block";
        }

        window.addEventListener("click", hide_then_show());
    </script>
</body>
</html>

Any suggestions would be appreciated. I don't know if I'm approaching this the best way

Upvotes: 0

Views: 1138

Answers (1)

Teemu
Teemu

Reputation: 23396

I've a doubt you're not using setTimeout() correctly. Here's how you can make this work.

function hide_then_show() {
    var id = document.getElementById("logo");
    setTimeout(function () {
        id.parentNode.style.display = "none";
        setTimeout(function () {
            id.parentNode.style.display = "block";
        }, 1000); // Hiding time
    }, 1000); // Delay between click and hide
}
window.addEventListener("click", hide_then_show, false);

A working demo at jsFiddle. You can play with the fiddle and adjust delays, you'll see, how fast you can switch the image display.

If you need a blinker, you can check this fiddle.

Upvotes: 1

Related Questions