是否有任何情况下setTimeout（..，0）优于requestAnimationFrame（）？

Question

I've been using setTimeout(function(){ ... }, 0) as a way to delay a function call by one tick.

Normally I've been using this method for when I am trying to directly manipulate the event loop to make sure things execute in certain order, and in most cases it has to do with UI.

And sometimes I could sense that "tick", especially when I'm using this to run some 3rd party JS library on an element.

But I recently discovered requestAnimationFrame . This pretty much achieve the same thing, but in more graceful way.

Now I'm curious, are there any cases where it's more beneficial to use the setTimeout(function(){ ... }, 0) over requestAnimationFrame(function(){ ... }) ?

Answer 1

From https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Only red flag I'm seeing is this guy:

The callback rate may be reduced to a lower rate when running in background tabs or in hidden iframes in order to improve performance and battery life.

But I believe that only happens when you've got requestAnimationFrame recursively calling itself.

So if you've got some long running bit of code that uses requestAnimationFrame, it might take longer if the user is not on that tab. Other than that, you're using a function to do something it was never intended to do, but then setTimeout wasn't designed as a way to skip a tick so...

As a word of advice: Generally, I've found you can usually avoid the setTimeout trick by properly using promises, etc. But I have found cases, esp. when using Angular 1.x where I couldn't figure out a better solution than to use it.

Interesting tidbit. With a naive performance test, requestAnimationFrame seems to be significantly faster:

console.time()
for(let i = 0; i < 100000; i++){
  requestAnimationFrame(() => {(5*5*77/3)*88});
}
console.timeEnd()

gets ~80ms (on my pc)

console.time()
for(let i = 0; i < 100000; i++){
  setTimeout(() => {(5*5*77/3)*88}, 0);
}
console.timeEnd()

gets ~225ms (on my pc)

Answer 2

They're not the same thing.

A function that calls itself using setTimeout(fn, 0) will run as often as possible.

A function that calls itself using requestAnimationFrame(fn) will be called once for every frame -- typically 60 times a second. As the name implies, it's intended for animations, where it doesn't make sense to update the state of the page any more often than it can be displayed.