使用 requestAnimationFrame() 作为 setInterval() Javascript

Question

我目前正在使用 setInterval() 来创建在屏幕上以特定频率闪烁的按钮。像这样：（元素指的是按钮）

setInterval(function() { 
   if($(element).css("background-color") === darkColor){ //if colour is dark
       $(element).css("background-color", lightColor); //set to light

   }else if($(element).css("background-color") === lightColor){ //if colour is light
       $(element).css("background-color", darkColor); //set to dark
   }
}, frequency); //frequency value is in milliseconds

我最近在 Internet 上看到 requestAnimationFrame() 函数通常更适合显示定时屏幕动画。您知道如何在这种情况下使用 requestAnimationFrame() 吗？或者是否适合在这种情况下使用它？

注意：必须使用 Javascript 来执行闪烁效果（无 CSS）

谢谢

Answer 1

您通过给它一个函数引用来使用requestAnimationFrame()。如果你想用同一个函数连续调用它，让函数递归调度另一个requestAnimationFrame()，它不会像setInterval()那样连续触发，它更像setTimeout()。

如果您想延迟下一个请求，那么您并没有真正比setInterval 或setTimeout 受益，因为您仍然需要在一段时间后安排下一个动画帧请求。 requestAnimationFrame() 只是说，“嘿浏览器，下次你去绘制窗口时，在你画的时候运行这个函数。”

您会遇到像这样比较颜色的问题。在某些情况下，您可能会收到 rgb(n, n, n)，在其他情况下可能会收到十六进制字符串。我不知道 API 规范。

警告，下面的例子会非常快地闪烁颜色

function change() {
  if ($("#foo").css("background-color") === "rgb(0, 128, 0)") {
    $("#foo").css("background-color", "rgb(128, 0, 0)");
  } else {
    $("#foo").css("background-color", "green");
  }
  
  setTimeout(()=>requestAnimationFrame(change), 500);
}

$("#foo").css("background-color", "red");
requestAnimationFrame(change);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="foo">M</span>

另外，我真的建议您改用 CSS 动画。

#foo {
  animation: 500ms flicker infinite steps(1);
}

@keyframes flicker {
  0% {
    background-color: rgb(256, 0, 0);
  }
  50% {
    background-color: rgb(0, 256, 0);
  }
}

<span id="foo">M</span>