使用 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

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

注意：必须使用Javascript来实现闪烁效果（没有CSS）

谢谢

Answer 1

您可以通过给它一个函数引用来使用 requestAnimationFrame()。如果你想用相同的函数连续调用它，让函数递归地安排另一个 requestAnimationFrame()，它不会像 setInterval() 那样连续触发，它的行为更像 setTimeout().

如果你想延迟下一个请求，那么你并没有真正获得超过 setInterval 或 setTimeout 的好处，因为你仍然必须在一段时间后安排下一个动画帧请求时间。 requestAnimationFrame() 只是说，"Hey browser, next time you go to paint the window, run this function while you're at it."

你会运行遇到像这样比较颜色的问题。在某些情况下您可能会得到一个 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>

使用 requestAnimationFrame() 作为 setInterval() Javascript

Using requestAnimationFrame() as setInterval() Javascript

html

javascript

setinterval

web

requestanimationframe