mirror of
https://github.com/status-im/react-native.git
synced 2025-02-11 08:56:44 +00:00
Summary: This is a follow up of the work by brentvatne in #5052. This addresses the feedback by astreet. - Uses ReactChoreographer with a new callback type - Callback dispatch logic moved to JS - Only calls into JS when needed, when there are pending callbacks, it even removes the Choreographer listener when no JS context listen for idle events. ** Test plan ** Tested by running a background task that burns all remaining idle time (see new UIExplorer example) and made sure that UI and JS fps stayed near 60 on a real device (Nexus 6) with dev mode disabled. Also tried adding a JS driven animation and it stayed smooth. Tested that native only calls into JS when there are pending idle callbacks. Also tested that timers are executed before idle callback. ``` requestIdleCallback(() => console.log(1)); setTimeout(() => console.log(2), 100); burnCPU(1000); // 2 // 1 ``` I did *not* test with webworkers but it should work as I'm using executor tokens. Closes https://github.com/facebook/react-native/pull/8569 Differential Revision: D3558869 Pulled By: astreet fbshipit-source-id: 61fa82eb26001d2b8c2ea69c35bf3eb5ce5454ba
175 lines
5.6 KiB
JavaScript
175 lines
5.6 KiB
JavaScript
/**
|
|
* Copyright (c) 2015-present, Facebook, Inc.
|
|
* All rights reserved.
|
|
*
|
|
* This source code is licensed under the BSD-style license found in the
|
|
* LICENSE file in the root directory of this source tree. An additional grant
|
|
* of patent rights can be found in the PATENTS file in the same directory.
|
|
*
|
|
* @providesModule JSTimers
|
|
*/
|
|
'use strict';
|
|
|
|
// Note that the module JSTimers is split into two in order to solve a cycle
|
|
// in dependencies. NativeModules > BatchedBridge > MessageQueue > JSTimersExecution
|
|
var RCTTiming = require('NativeModules').Timing;
|
|
var JSTimersExecution = require('JSTimersExecution');
|
|
|
|
/**
|
|
* JS implementation of timer functions. Must be completely driven by an
|
|
* external clock signal, all that's stored here is timerID, timer type, and
|
|
* callback.
|
|
*/
|
|
var JSTimers = {
|
|
Types: JSTimersExecution.Types,
|
|
|
|
/**
|
|
* Returns a free index if one is available, and the next consecutive index
|
|
* otherwise.
|
|
*/
|
|
_getFreeIndex: function() {
|
|
var freeIndex = JSTimersExecution.timerIDs.indexOf(null);
|
|
if (freeIndex === -1) {
|
|
freeIndex = JSTimersExecution.timerIDs.length;
|
|
}
|
|
return freeIndex;
|
|
},
|
|
|
|
/**
|
|
* @param {function} func Callback to be invoked after `duration` ms.
|
|
* @param {number} duration Number of milliseconds.
|
|
*/
|
|
setTimeout: function(func, duration, ...args) {
|
|
var newID = JSTimersExecution.GUID++;
|
|
var freeIndex = JSTimers._getFreeIndex();
|
|
JSTimersExecution.timerIDs[freeIndex] = newID;
|
|
JSTimersExecution.callbacks[freeIndex] = function() {
|
|
return func.apply(undefined, args);
|
|
};
|
|
JSTimersExecution.types[freeIndex] = JSTimersExecution.Type.setTimeout;
|
|
RCTTiming.createTimer(newID, duration || 0, Date.now(), /** recurring */ false);
|
|
return newID;
|
|
},
|
|
|
|
/**
|
|
* @param {function} func Callback to be invoked every `duration` ms.
|
|
* @param {number} duration Number of milliseconds.
|
|
*/
|
|
setInterval: function(func, duration, ...args) {
|
|
var newID = JSTimersExecution.GUID++;
|
|
var freeIndex = JSTimers._getFreeIndex();
|
|
JSTimersExecution.timerIDs[freeIndex] = newID;
|
|
JSTimersExecution.callbacks[freeIndex] = function() {
|
|
return func.apply(undefined, args);
|
|
};
|
|
JSTimersExecution.types[freeIndex] = JSTimersExecution.Type.setInterval;
|
|
RCTTiming.createTimer(newID, duration || 0, Date.now(), /** recurring */ true);
|
|
return newID;
|
|
},
|
|
|
|
/**
|
|
* @param {function} func Callback to be invoked before the end of the
|
|
* current JavaScript execution loop.
|
|
*/
|
|
setImmediate: function(func, ...args) {
|
|
var newID = JSTimersExecution.GUID++;
|
|
var freeIndex = JSTimers._getFreeIndex();
|
|
JSTimersExecution.timerIDs[freeIndex] = newID;
|
|
JSTimersExecution.callbacks[freeIndex] = function() {
|
|
return func.apply(undefined, args);
|
|
};
|
|
JSTimersExecution.types[freeIndex] = JSTimersExecution.Type.setImmediate;
|
|
JSTimersExecution.immediates.push(newID);
|
|
return newID;
|
|
},
|
|
|
|
/**
|
|
* @param {function} func Callback to be invoked every frame.
|
|
*/
|
|
requestAnimationFrame: function(func) {
|
|
var newID = JSTimersExecution.GUID++;
|
|
var freeIndex = JSTimers._getFreeIndex();
|
|
JSTimersExecution.timerIDs[freeIndex] = newID;
|
|
JSTimersExecution.callbacks[freeIndex] = func;
|
|
JSTimersExecution.types[freeIndex] = JSTimersExecution.Type.requestAnimationFrame;
|
|
RCTTiming.createTimer(newID, 1, Date.now(), /** recurring */ false);
|
|
return newID;
|
|
},
|
|
|
|
/**
|
|
* @param {function} func Callback to be invoked every frame and provided
|
|
* with time remaining in frame.
|
|
*/
|
|
requestIdleCallback: function(func) {
|
|
if (!RCTTiming.setSendIdleEvents) {
|
|
console.warn('requestIdleCallback is not currently supported on this platform');
|
|
return requestAnimationFrame(func);
|
|
}
|
|
|
|
if (JSTimersExecution.requestIdleCallbacks.length === 0) {
|
|
RCTTiming.setSendIdleEvents(true);
|
|
}
|
|
|
|
var newID = JSTimersExecution.GUID++;
|
|
var freeIndex = JSTimers._getFreeIndex();
|
|
JSTimersExecution.timerIDs[freeIndex] = newID;
|
|
JSTimersExecution.callbacks[freeIndex] = func;
|
|
JSTimersExecution.types[freeIndex] = JSTimersExecution.Type.requestIdleCallback;
|
|
JSTimersExecution.requestIdleCallbacks.push(newID);
|
|
return newID;
|
|
},
|
|
|
|
cancelIdleCallback: function(timerID) {
|
|
JSTimers._clearTimerID(timerID);
|
|
var index = JSTimersExecution.requestIdleCallbacks.indexOf(timerID);
|
|
if (index !== -1) {
|
|
JSTimersExecution.requestIdleCallbacks.splice(index, 1);
|
|
}
|
|
|
|
if (JSTimersExecution.requestIdleCallbacks.length === 0) {
|
|
RCTTiming.setSendIdleEvents(false);
|
|
}
|
|
},
|
|
|
|
clearTimeout: function(timerID) {
|
|
JSTimers._clearTimerID(timerID);
|
|
},
|
|
|
|
clearInterval: function(timerID) {
|
|
JSTimers._clearTimerID(timerID);
|
|
},
|
|
|
|
clearImmediate: function(timerID) {
|
|
JSTimers._clearTimerID(timerID);
|
|
var index = JSTimersExecution.immediates.indexOf(timerID);
|
|
if (index !== -1) {
|
|
JSTimersExecution.immediates.splice(index, 1);
|
|
}
|
|
},
|
|
|
|
cancelAnimationFrame: function(timerID) {
|
|
JSTimers._clearTimerID(timerID);
|
|
},
|
|
|
|
_clearTimerID: function(timerID) {
|
|
// JSTimersExecution.timerIDs contains nulls after timers have been removed;
|
|
// ignore nulls upfront so indexOf doesn't find them
|
|
if (timerID == null) {
|
|
return;
|
|
}
|
|
|
|
var index = JSTimersExecution.timerIDs.indexOf(timerID);
|
|
// See corresponding comment in `callTimers` for reasoning behind this
|
|
if (index !== -1) {
|
|
JSTimersExecution._clearIndex(index);
|
|
var type = JSTimersExecution.types[index];
|
|
if (type !== JSTimersExecution.Type.setImmediate &&
|
|
type !== JSTimersExecution.Type.requestIdleCallback) {
|
|
RCTTiming.deleteTimer(timerID);
|
|
}
|
|
}
|
|
},
|
|
};
|
|
|
|
module.exports = JSTimers;
|