Move debouncer to App.

Debounce drag of splitter and window resize
This commit is contained in:
j433866 2019-06-03 14:59:41 +01:00
parent eb91dd7a7d
commit 87dc325932
3 changed files with 28 additions and 27 deletions

View File

@ -41,6 +41,7 @@ class App {
this.autoBakePause = false; this.autoBakePause = false;
this.progress = 0; this.progress = 0;
this.ingId = 0; this.ingId = 0;
this.timeouts = {};
} }
@ -264,11 +265,11 @@ class App {
minSize: minimise ? [0, 0, 0] : [240, 370, 450], minSize: minimise ? [0, 0, 0] : [240, 370, 450],
gutterSize: 4, gutterSize: 4,
expandToMin: false, expandToMin: false,
onDrag: function() { onDrag: this.debounce(function() {
this.manager.recipe.adjustWidth(); this.manager.recipe.adjustWidth();
this.manager.input.calcMaxTabs(); this.manager.input.calcMaxTabs();
this.manager.output.calcMaxTabs(); this.manager.output.calcMaxTabs();
}.bind(this) }, 50, "dragSplitter", this, [])
}); });
this.ioSplitter = Split(["#input", "#output"], { this.ioSplitter = Split(["#input", "#output"], {
@ -728,6 +729,29 @@ class App {
this.loadURIParams(); 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; export default App;

View File

@ -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. * Handler for input change events.
* Debounces the input so we don't call autobake too often. * Debounces the input so we don't call autobake too often.
@ -627,7 +605,7 @@ class InputWaiter {
* @param {event} e * @param {event} e
*/ */
debounceInputChange(e) { debounceInputChange(e) {
this.debounce(this.inputChange.bind(this), 50, [e])(); this.app.debounce(this.inputChange, 50, "inputChange", this, [e])();
} }
/** /**

View File

@ -25,8 +25,7 @@ class WindowWaiter {
* continuous resetting). * continuous resetting).
*/ */
windowResize() { windowResize() {
clearTimeout(this.resetLayoutTimeout); this.app.debounce(this.app.resetLayout, 200, "windowResize", this.app, [])();
this.resetLayoutTimeout = setTimeout(this.app.resetLayout.bind(this.app), 200);
} }