interval(0, animationFrameScheduler) emits twice each frame

[waterplea]

Bug Report

Current Behavior
Currently, there seems to be 2 similar ways to organize requestAnimationFrame based observables:

1. interval(0, animationFrameScheduler)
2. of(0, animationFrameScheduler).pipe(repeat())

However first approach, using interval apparently emits twice each frame. See demo on Stackblitz.

Reproduction

• REPL or Repo link:
  https://stackblitz.com/edit/angular-rxjs-animationframe-bug

Expected behavior
interval(0, animationFrameScheduler) should emit once each frame

Environment

• Runtime: Chrome v76
• RxJS version: 6.5.2

Additional context/Screenshots
Found those two solutions through search on StackOverflow:
https://stackoverflow.com/a/41818876/2706426

[martinsik]

It looks more like this is an implementation detail (maybe how the internal browser's timer is refreshed) so it just appears like the events are duplicated. If you use a different method to measure the time between two emissions (new Date().getTime() - start) / duration you can see that the delays are different. Also for interval it makes on my machine around 120 emissions and only some of them have same times. With of it makes just around 50 emissions.

[waterplea]

This is misleading then. requestAnimationFrame is capped at 60 frames per second as far as I know. Seems like interval(0, animationFrameScheduler) is not requestAnimationFrame at all. This is pretty important since it's totally different thing to do something with requestAnimationFrame and with interval every 16 milliseconds. Can somebody from rxjs team confirm how to properly make Observable of requestAnimationFrame?

[cartant]

FWIW, the animationFrameScheduler definitely uses rAF:

rxjs/src/internal/scheduler/AnimationFrameAction.ts

Lines 27 to 28 in 3881723

	return scheduler.scheduled || (scheduler.scheduled = requestAnimationFrame(
	() => scheduler.flush(null)));

I've not yet had the time to look at the repro - or at Martin's analysis/comments - but I will try to find the time soon.

[dominique-mueller]

I can confirm the issue, for each frame the observable emits twice. Very confusing, and certainly different from what I was expecting ...

[waterplea]

Just came here to let you know that scheduled which is a suggested replacement to of with scheduler works fine emitting just once per frame. By the way, why animationFrameScheduler.now() returns a whole number timestamp whereas performance.now() has nanoseconds? I expected them to be equal, tbh.

[Achilles1515]

Just came here to let you know that scheduled which is a suggested replacement to of with scheduler works fine emitting just once per frame.

Can you give an example of the proper way to do this?

See this StackBlitz (with the scheduled method being "third").

None of these counts using RxJS match up with the real requestAnimationFrame count (see the console logs). Am I doing something wrong with the scheduled example?

[waterplea]

Yep, this is really strange. I haven't checked it the way you did, just the basic notion that there were 60 not 120 console logs per second gave me that impression.