為什么元素只有在計時器結束后才開始旋轉

Question

這是一個 html p 元素。 點擊時：

1. 背景顏色更改為red而不是yellow
2. 它使用 css 變換開始旋轉，通過將元素 class 設置為refresh-start

這是在點擊處理程序onClickRefresh中完成的。

但是，只有在調用timer 、結束其操作並返回后才會反映更改。 計時器等待 5 秒（5000 毫秒）。

我希望在調用計時器之前立即看到更改。 那是：

1. 旋轉立即開始
2. 顏色變為紅色而不是黃色

這沒有發生。 這有什么意義？

 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

您的timer function 是同步的，它會阻塞下一個代碼，直到它完全執行。 試試異步定時器

 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

嘗試使用setTimeout

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

此代碼在 5000 毫秒后調用 function，將背景顏色更改為黃色。 您的代碼的 rest 會立即執行。

 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：使用setTimeout() ：

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

您的問題出在計時器 function 中。 HTML/JavaScript/CSS 是單線程的。 這意味着，如果你在一個無限循環中做某事，一切都會停止。 您的計時器 function 中有某種無限循環，盡管它在 5 秒后結束，但與此同時，一切都“滯后”了，CSS Z6F1C25ED1523962F1BBF9DEE9509 無法啟動。 因此，您必須使用以下語法：

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

Answer 4

這是因為 timer(5000) 下面的代碼不會在 5 秒內執行，因為 css("background-color", "yellow") 是同步執行的。 這意味着 JavaScript 都立即放置 css 效果，只需執行計時器並在后台運行計時器。 如果你想在 5 秒內將背景顏色從紅色變為黃色，你應該使用“setTimeout”。 它會在您輸入的時間內在其中執行回調 function。

這是我的解決方案。

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);
   
}

希望你能找到答案：D