animationFrameScheduler incorrect behavior
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 31.7k
- Forks
- 3k
- PR merge metrics
- No merged PRs in 30d
Description
Describe the bug
AnimationFrameScheduler doesn't execute scheduled tasks under certain circumstances.
If AnimationFrameScheduler gets a new id (e.g. new task is scheduled) before the flush method empties current actions array in the do-while loop we encounter wrong behavior.
In this case we enter the recycleAsyncId method of AnimationFrameAction .
Then recycleAsyncId sets _scheduled field to undefined.
After that we add new actions to the actions array in requestAsyncId, start requestAnimationFrame and enter flush method again on browser repaint.
But this time actions array in the flush method has two types of action with different id's.
What is the most important is that the first element of the actions array has id which is different from the current frame id.
This leads us to false condition "action.id === flushId" (in do-while loop) because action.id is the id of the previous frame but flushId is the id of the current frame.
Since that moment we are unable to execute any action in the actions array and empty it.
Problem occured after commit e35f589e2ca10ab2d2d69f7e9fe60727edc4c53d
in src/internal/scheduler/AnimationFrameAction.ts lines 30-33
Expected behavior
Expected console log output:
default task
task1
task2
default task
task1
task2
Reproduction code
let reschedule = true;
function log() {
console.log('default task');
animationFrameScheduler.schedule(() => console.log('task1'));
animationFrameScheduler.schedule(() => console.log('task2'));
if (reschedule) {
this.schedule();
reschedule = false;
}
}
animationFrameScheduler.schedule(log);
Reproduction URL
https://stackblitz.com/edit/1gjlhu?devtoolsheight=50&file=index.ts
Version
7.5.1
Environment
No response
Additional context
animationFrameScheduler from rxjs version 7.1.0 worked correctly in this case
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with src/internal/scheduler/AnimationFrameAction.ts, especially lines 30-33, and reproduce the issue using the linked StackBlitz example. Trace the interaction between the actions array, recycleAsyncId, requestAsyncId, and flush; done means the reproduction produces the two expected sets of default task, task1, and task2 output.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- typescript
- Domain
- web-dev
- Issue type
- Bug
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Stale
- Clarity
- Clearly specified
- Newbie friendliness
- 48/100