Run JavaScript function after the first function completes applying CSS styles to an element - callback not working

Question

As shown in the snippet, I have two buttons. When either button is clicked, the following should happen in this order: (1) colour changes to red, (2) button is hidden (3) alert box with the button ID is displayed.

I have tried passing function2 as a callback parameter to function1 but what actually happens is the alert box gets displayed first and then the button disappears without the colour change.

I don't understand why this is happening. Any help/tips would be appreciated!

 var items = document.getElementsByClassName("buttons"); for (var i = 0; i < items.length; i++) { items[i].addEventListener("click", function() { function1(this.id, function2); }); } function function1 (uid, callback) { document.getElementById(uid).style.backgroundColor = "red"; document.getElementById(uid).style.display = "none"; callback(uid); } function function2 (clicked_id) { alert(clicked_id); }

 <p>Clicking on a button should change its color to red, hide it and then display an alert box with the button's ID:</p> <div class="main"> <button id="btn1" class="buttons">Button 1</button> <button id="btn2" class="buttons">Button 2</button> </div>

Answer 1

You need to give the browser's UI thread (which is the thread your JavaScript code runs on) time to repaint the page before you stop the world with alert . Or better yet, don't use alert at all.

You can usually get away with delaying it by one event loop cycle via

setTimeout(callback, 0, uid);

...but not always. The most effective way I've found to date (but I don't have to do this often, because I don't use the stop-the-world functions alert , confirm , or prompt often) is to use the setTimeout inside a requestAnimationFrame call:

requestAnimationFrame(() => {
    setTimeout(callback, 0, uid);
});

The outer callback is called just before the browser is ready to repaint after your changes have been applied, so we schedule a call after that.

Updated Snippet:

 var items = document.getElementsByClassName("buttons"); for (var i = 0; i < items.length; i++) { items[i].addEventListener("click", function() { function1(this.id, function2); }); } function function1 (uid, callback) { document.getElementById(uid).style.backgroundColor = "red"; document.getElementById(uid).style.display = "none"; requestAnimationFrame(() => { setTimeout(callback, 0, uid); }); } function function2 (clicked_id) { alert(clicked_id); }

 <p>Clicking on a button should change its color to red, hide it and then display an alert box with the button's ID:</p> <div class="main"> <button id="btn1" class="buttons">Button 1</button> <button id="btn2" class="buttons">Button 2</button> </div>