Rxjs animationFrameScheduler is triggered only every ~35ms

Question

version rxjs 7.8.0

let last = Date.now();
scheduled([0], animationFrameScheduler)
  .pipe(
    repeat(),
    takeUntil(timer(1000))
  )
  .subscribe({
    next: () => {
      console.log(Date.now() - last);
      last = Date.now();
    },
  });

Can somebody tell me why console.log is triggered on average only 35ms instead 16ms?

Answer 1

I think you might have found a bug... (which I will investigate later) because this works at 60fps:

let last = performance.now();
interval(0, animationFrameScheduler)
  .pipe(
    tap(() => {
      const performanceNow = performance.now();
      console.log(performanceNow - last);
      last = performanceNow;
    }),
    takeUntil(timer(1000))
  ).subscribe();

(...later)

So it seams the repeat operator calls the schedule handle (which is requestAnimationFrame) two times on resubscribe.

You can test this by changing takeUntil to take(2) and pausing code in rxjs/src/internal/scheduler/animationFrameProvider.ts

BUT what is really funny is that if you put the two pieces of code in the same scope they run "correctly". See: https://stackblitz.com/edit/rxjs-aksefi?file=index.ts

Shall we add a bug on rxjs?