why element starts rotating only after timer ends

Question

here's a html p element. When clicked:

1. background-color is changed to red than yellow
2. it starts to rotate using css transform, by setting the element class to refresh-start

This is done in the click handler onClickRefresh .

However changes are reflected only after the timer is called, ends its operation and return. timer waits 5 sec (5000ms).

I would expect to see the changes immediately, before timer is called. that is:

1. rotation starts immediately
2. color changes to red than yellow

this is not happening. How does it make sense?

 function onClickRefresh(el){ //jquery selector let id = "#" + el.id; //read class const co = (id)=>{ return $(id).attr("class")} //current class console.log("class before:", co(id)); //setting class - start rotating el.className = "refresh-start"; console.log("class after:", co(id)); //temp color $(id).css("background-color","red"); timer(5000); $(id).css("background-color","yellow"); } function timer(ms){ const d1 = new Date(); let cont = true; while (cont){ let d2 = new Date(); cont = (d2-d1 >= ms? false: true); } }

 @keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)} }.refresh-start { animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; }.refresh-end{ animation-play-state: paused; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="refreshNRList1" class="refresh-end" onclick="onClickRefresh(this)"/> text </p>

Answer 1

Your timer function is synchronous it blocks the next code until it is completely executed. try asynchronous timer

 async function onClickRefresh(el) { //jquery selector let id = "#" + el.id; //read class const co = (id) => { return $(id).attr("class"); }; //current class console.log("class before:", co(id)); //setting class - start rotating el.className = "refresh-start"; console.log("class after:", co(id)); //temp color $(id).css("background-color", "red"); await timer(5000); $(id).css("background-color", "yellow"); } async function timer(ms) { return new Promise((resolve) => setTimeout(resolve, ms)); }

 @keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)} }.refresh-start { animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; }.refresh-end{ animation-play-state: paused; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="refreshNRList1" class="refresh-end" onclick="onClickRefresh(this)"/> text </p>

Answer 2

Try using setTimeout

setTimeout(
  () => {    
    $(id).css("background-color","yellow");
  }, 
  5000
);

This code calls a function after 5000 milliseconds, that changes the background-color to yellow. The rest of your code is executed immediately.

 function onClickRefresh(el){ //jquery selector let id = "#" + el.id; //read class const co = (id)=>{ return $(id).attr("class")} //current class console.log("class before:", co(id)); //setting class - start rotating el.className = "refresh-start"; console.log("class after:", co(id)); //temp color $(id).css("background-color","red"); setTimeout( () => { $(id).css("background-color","yellow"); }, 5000 ); }

 @keyframes rotate { from {transform: rotate(0deg)} to {transform: rotate(360deg)} }.refresh-start { animation-name: rotate; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; animation-play-state: running; }.refresh-end{ animation-play-state: paused; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script> <p id="refreshNRList1" class="refresh-end" onclick="onClickRefresh(this)"/> text </p>

Answer 3

TL;DR: Use setTimeout() :

    //remove the "`timer(5000);`" line and the timer function.
    setTimeout(() => {
      $(id).css("background-color","yellow");
    }, 5000)

Your problem is in the timer function. HTML/JavaScript/CSS are single-threaded. It means, that if you make something in an infinite loop, everything will stop. You had some kind of infinite loop in your timer function, though it ended at the end on 5 seconds, but in the meanwhile, everything was 'lagged' and the CSS animation couldn't start. For this reason you have to use this syntax:

setTimeout(() => {
    //code...
}, 5000 /*delay in milliseconds*/)

Answer 4

That's because the code below timer(5000) doesn't execute in 5 second cuz css("background-color", "yellow") execute synchronously. Which means JavaScript all put css effect immediately and just execute the timer and just run the timer in background. If you wanna change the background color from red to yellow in 5 second, you should use "setTimeout". It execute the call back function in it in the time you put.

Here is my solution.

function onClickRefresh(el){

    let id = "#" + el.id;   
    const co = (id)=>{ return $(id).attr("class")}
    
    el.className = "refresh-start";
   
    $(id).css("background-color","red");
    
    setTimeout(() => {
        $(id).css("background-color","yellow");
    }, 5000);
   
}

I hope you find an answer:D