From 87dc325932471680118f5e8874914397b07cb4a9 Mon Sep 17 00:00:00 2001 From: j433866 Date: Mon, 3 Jun 2019 14:59:41 +0100 Subject: [PATCH] Move debouncer to App. Debounce drag of splitter and window resize --- src/web/App.mjs | 28 ++++++++++++++++++++++++++-- src/web/InputWaiter.mjs | 24 +----------------------- src/web/WindowWaiter.mjs | 3 +-- 3 files changed, 28 insertions(+), 27 deletions(-) diff --git a/src/web/App.mjs b/src/web/App.mjs index e57ac23a..36643902 100755 --- a/src/web/App.mjs +++ b/src/web/App.mjs @@ -41,6 +41,7 @@ class App { this.autoBakePause = false; this.progress = 0; this.ingId = 0; + this.timeouts = {}; } @@ -264,11 +265,11 @@ class App { minSize: minimise ? [0, 0, 0] : [240, 370, 450], gutterSize: 4, expandToMin: false, - onDrag: function() { + onDrag: this.debounce(function() { this.manager.recipe.adjustWidth(); this.manager.input.calcMaxTabs(); this.manager.output.calcMaxTabs(); - }.bind(this) + }, 50, "dragSplitter", this, []) }); this.ioSplitter = Split(["#input", "#output"], { @@ -728,6 +729,29 @@ class App { this.loadURIParams(); } + + /** + * Debouncer to stop functions from being executed multiple times in a + * short space of time + * https://davidwalsh.name/javascript-debounce-function + * + * @param {function} func - The function to be executed after the debounce time + * @param {number} wait - The time (ms) to wait before executing the function + * @param {string} id - Unique ID to reference the timeout for the function + * @param {object} scope - The object to bind to the debounced function + * @param {array} args - Array of arguments to be passed to func + * @returns {function} + */ + debounce(func, wait, id, scope, args) { + return function() { + const later = function() { + func.apply(scope, args); + }; + clearTimeout(this.timeouts[id]); + this.timeouts[id] = setTimeout(later, wait); + }.bind(this); + } + } export default App; diff --git a/src/web/InputWaiter.mjs b/src/web/InputWaiter.mjs index 75b5ef6c..83e8f235 100644 --- a/src/web/InputWaiter.mjs +++ b/src/web/InputWaiter.mjs @@ -598,28 +598,6 @@ class InputWaiter { } - /** - * Debouncer to stop functions from being executed multiple times in a - * short space of time - * https://davidwalsh.name/javascript-debounce-function - * - * @param {function} func - The function to be executed after the debounce time - * @param {number} wait - The time (ms) to wait before executing the function - * @param {array} args - Array of arguments to be passed to func - * @returns {function} - */ - debounce(func, wait, args) { - return function() { - const context = this, - later = function() { - this.inputTimeout = null; - func.apply(context, args); - }; - clearTimeout(this.inputTimeout); - this.inputTimeout = setTimeout(later, wait); - }.bind(this); - } - /** * Handler for input change events. * Debounces the input so we don't call autobake too often. @@ -627,7 +605,7 @@ class InputWaiter { * @param {event} e */ debounceInputChange(e) { - this.debounce(this.inputChange.bind(this), 50, [e])(); + this.app.debounce(this.inputChange, 50, "inputChange", this, [e])(); } /** diff --git a/src/web/WindowWaiter.mjs b/src/web/WindowWaiter.mjs index a8e124f5..5b44ff98 100755 --- a/src/web/WindowWaiter.mjs +++ b/src/web/WindowWaiter.mjs @@ -25,8 +25,7 @@ class WindowWaiter { * continuous resetting). */ windowResize() { - clearTimeout(this.resetLayoutTimeout); - this.resetLayoutTimeout = setTimeout(this.app.resetLayout.bind(this.app), 200); + this.app.debounce(this.app.resetLayout, 200, "windowResize", this.app, [])(); }