From 53f7716a3f9fffd142ba762a515c77fe7f17db9e Mon Sep 17 00:00:00 2001 From: Jukka Kurkela Date: Tue, 23 Feb 2021 22:50:36 +0200 Subject: [PATCH] Extract helper --- src/core/core.controller.js | 12 ++++-------- src/helpers/helpers.extras.js | 19 +++++++++++++++++++ 2 files changed, 23 insertions(+), 8 deletions(-) diff --git a/src/core/core.controller.js b/src/core/core.controller.js index b230ee5ea06..7450587dfb9 100644 --- a/src/core/core.controller.js +++ b/src/core/core.controller.js @@ -11,6 +11,7 @@ import {each, callback as callCallback, uid, valueOrDefault, _elementsEqual} fro import {clearCanvas, clipArea, unclipArea, _isPointInArea} from '../helpers/helpers.canvas'; // @ts-ignore import {version} from '../../package.json'; +import {debounce} from '../helpers/helpers.extras'; /** * @typedef { import("../platform/platform.base").ChartEvent } ChartEvent @@ -122,7 +123,7 @@ class Chart { this.attached = false; this._animationsDisabled = undefined; this.$context = undefined; - this._resizeTimer = undefined; + this._doResize = debounce(() => this.update('resize'), options.resizeDelay || 0); // Add the chart instance to the global namespace instances[me.id] = me; @@ -243,14 +244,9 @@ class Chart { callCallback(options.onResize, [newSize], me); if (me.attached) { - const delay = options.resizeDelay || 0; - const resizeUpdate = () => me.update('resize'); - if (delay) { - clearTimeout(me._resizeTimer); - me._resizeTimer = setTimeout(resizeUpdate, delay); + if (me._doResize()) { + // The resize update is delayed, only draw without updating. me.render(); - } else { - resizeUpdate(); } } } diff --git a/src/helpers/helpers.extras.js b/src/helpers/helpers.extras.js index 21857a6e993..703fbf208d4 100644 --- a/src/helpers/helpers.extras.js +++ b/src/helpers/helpers.extras.js @@ -40,6 +40,25 @@ export function throttled(fn, thisArg, updateFn) { }; } +/** + * Debounces calling `fn` for `delay` ms + * @param {function} fn - Function to call. No arguments are passed. + * @param {number} delay - Delay in ms. 0 = immediate invocation. + * @returns {function} + */ +export function debounce(fn, delay) { + let timeout; + return function() { + if (delay) { + clearTimeout(timeout); + timeout = setTimeout(fn, delay); + } else { + fn(); + } + return delay; + }; +} + /** * Converts 'start' to 'left', 'end' to 'right' and others to 'center'