Move debouncer to App.

Debounce drag of splitter and window resize

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;