为什么元素只有在计时器结束后才开始旋转

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