I have an onClick() event that executes a function that contains an action and a second function.

function colorcodeSelectedElement()
{
    document.getElementById("something").style.border="2px solid red";
    executeAnotherFunction();
}   

If I click the item, the red border occurs only after second function if finished. If this second function takes 30 seconds, the red border occurs after 30 seconds. I would like to add some hourglas in case the second function takes longer...but I struggle due to the fact that, whatever UI element I draw or repaint, it always gets executed AFTER second function...which makes a "please wait" useless.

How do I get the first UI action executed immediately on onClick...before the second function starts?

CodePudding user response：

the color should change to red based on what you have written.

here is an example using promise to delay executeAnotherFunction : https://jsitor.com/y7x1TWSVJ

but as you see the color change before executeAnotherFunction is finished

CodePudding user response：

Using a timer works but it is best to use async if possible, like so:

async function colorcodeSelectedElement(){
    //waits until the code in the brackets has finished before calling executeAnotherFunction
    await (document.getElementById("something").style.border="2px solid red");
    executeAnotherFunction();
}

Here is an example of it in use https://codepen.io/codedevlo/pen/PoEEarO.

async reference

CodePudding user response：

The Timer does the trick...!!

function colorcodeSelectedElement()
{
    document.getElementById("something").style.border="2px solid red";
    setTimeout (function() {executeAnotherFunction();},100);
}   

Thank you!