Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

fix(core): ensure that multiple requests to requestAnimationFrame are buffered #11800

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 41 additions & 3 deletions src/ng/raf.js
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ function $$RAFProvider() { //rAF
$window.webkitCancelRequestAnimationFrame;

var rafSupported = !!requestAnimationFrame;
var raf = rafSupported
var rafFn = rafSupported
? function(fn) {
var id = requestAnimationFrame(fn);
return function() {
Expand All @@ -24,8 +24,46 @@ function $$RAFProvider() { //rAF
};
};

raf.supported = rafSupported;
queueFn.supported = rafSupported;

return raf;
var cancelLastRAF;
var taskCount = 0;
var taskQueue = [];
return queueFn;

function flush() {
for (var i = 0; i < taskQueue.length; i++) {
var task = taskQueue[i];
if (task) {
taskQueue[i] = null;
task();
}
}
taskCount = taskQueue.length = 0;
}

function queueFn(asyncFn) {
var index = taskQueue.length;

taskCount++;
taskQueue.push(asyncFn);

if (index === 0) {
cancelLastRAF = rafFn(flush);
}

return function cancelQueueFn() {
if (index >= 0) {
taskQueue[index] = null;
index = null;

if (--taskCount === 0 && cancelLastRAF) {
cancelLastRAF();
cancelLastRAF = null;
taskQueue.length = 0;
}
}
};
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This function seems broken altogether.

What if it is called after the next raf ?
Won't it cancel another unrelated task ?

Also, cancelling will not properly empty the queue (it will leave it full of nulls).

}];
}
40 changes: 40 additions & 0 deletions test/ng/rafSpec.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,46 @@ describe('$$rAF', function() {
expect(present).toBe(true);
}));

it('should only consume only one RAF if multiple async functions are registered before the first frame kicks in', inject(function($$rAF) {
if (!$$rAF.supported) return;

//we need to create our own injector to work around the ngMock overrides
var rafLog = [];
var injector = createInjector(['ng', function($provide) {
$provide.value('$window', {
location: window.location,
history: window.history,
webkitRequestAnimationFrame: function(fn) {
rafLog.push(fn);
}
});
}]);

$$rAF = injector.get('$$rAF');

var log = [];
function logFn() {
log.push(log.length);
}

$$rAF(logFn);
$$rAF(logFn);
$$rAF(logFn);

expect(log).toEqual([]);
expect(rafLog.length).toBe(1);

rafLog[0]();

expect(log).toEqual([0,1,2]);
expect(rafLog.length).toBe(1);

$$rAF(logFn);

expect(log).toEqual([0,1,2]);
expect(rafLog.length).toBe(2);
}));

describe('$timeout fallback', function() {
it("it should use a $timeout incase native rAF isn't suppored", function() {
var timeoutSpy = jasmine.createSpy('callback');
Expand Down