From 5836c19ec52c3896c7c92d7a3f3355a6ee6be96b Mon Sep 17 00:00:00 2001 From: Simon Brunel Date: Sat, 16 Apr 2016 02:15:54 +0200 Subject: [PATCH] Optimize animation frame requests (#2268) The animation service now keeps track of the active animation frame request and will skip new requests until the current one is executed. This can happen when processing mouse events, e.g. 'mousemove' and 'mouseout' events will trigger multiple renders. --- src/core/core.animation.js | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/core/core.animation.js b/src/core/core.animation.js index 6ab5f6c63..f1c4a71f1 100644 --- a/src/core/core.animation.js +++ b/src/core/core.animation.js @@ -26,6 +26,7 @@ module.exports = function(Chart) { frameDuration: 17, animations: [], dropFrames: 0, + request: null, addAnimation: function(chartInstance, animationObject, duration, lazy) { if (!lazy) { @@ -47,7 +48,7 @@ module.exports = function(Chart) { // If there are no animations queued, manually kickstart a digest, for lack of a better word if (this.animations.length === 1) { - helpers.requestAnimFrame.call(window, this.digestWrapper); + this.requestAnimationFrame(); } }, // Cancel the animation for a given chart instance @@ -61,9 +62,17 @@ module.exports = function(Chart) { chartInstance.animating = false; } }, - // calls startDigest with the proper context - digestWrapper: function() { - Chart.animationService.startDigest.call(Chart.animationService); + requestAnimationFrame: function() { + var me = this; + if (me.request === null) { + // Skip animation frame requests until the active one is executed. + // This can happen when processing mouse events, e.g. 'mousemove' + // and 'mouseout' events will trigger multiple renders. + me.request = helpers.requestAnimFrame.call(window, function() { + me.request = null; + me.startDigest(); + }); + } }, startDigest: function() { @@ -113,7 +122,7 @@ module.exports = function(Chart) { // Do we have more stuff to animate? if (this.animations.length > 0) { - helpers.requestAnimFrame.call(window, this.digestWrapper); + this.requestAnimationFrame(); } } }; -- 2.47.3