Merge d70f5e9 into af80ade

webroot/js/gui.js

@@ -1,19 +1,27 @@
 import * as domlib from './domlib';
+import * as lib from './lib';
 import {MenuView} from './element/menu';
 import Navigo from '../node_modules/navigo/lib/navigo';
 import View from './view';
 import {singelton as notify} from './element/notify';
 
 const router = new Navigo(null, true, '#'),
 	elMain = domlib.newEl('main'),
-	elMenu = new MenuView();
+	elMenu = new MenuView(),
+	GUI_RENDER_DEBOUNCER_TIME = 100;
 
 export {router};
 
+
 let init = false,
-	currentView = new View();
+	currentView = new View(),
+	debouncer = new lib.Debouncer(GUI_RENDER_DEBOUNCER_TIME, "gui render");
 
 export function render () {
+	debouncer.run(renderView);
+}
+
+function renderView () {
 	if (!document.body) {
 		return;
 	}
@@ -26,7 +34,6 @@ export function render () {
 
 		init = true;
 	}
-
 	currentView.render();
 
 	notify.render();
@@ -35,6 +42,7 @@ export function render () {
 	router.resolve();
 }
 
+
 export function setView (toView) {
 	currentView.unbind();
 	currentView = toView;

webroot/js/lib.js

@@ -23,3 +23,32 @@ export function FromNowAgo(timeString) {
 	time /= 24;
 	return Math.round(time) + ' d';
 }
+
+
+/// Suppresses multiple rapid calls to a function, and instead calls the target function when a timeout has elapsed.
+export class Debouncer {
+	constructor (timeoutMsec, description) {
+		this.timeoutMsec = timeoutMsec;
+		this.desc = description;
+
+		this.timer = null;
+		this.numCallsSkipped = 0;
+	}
+
+	run (actualFunction) {
+		if (this.timer == null) {
+			actualFunction();
+			this.timer = window.setTimeout(() => {
+				this.timer = null;
+				if (this.numCallsSkipped > 0) {
+					console.log("skipped " + this.numCallsSkipped + " " + this.desc + " calls; running " + this.desc + " now");
+					this.numCallsSkipped = 0;
+					this.run(actualFunction);
+				}
+			}, this.timeoutMsec);
+		} else {
+			console.log("skipping " + this.desc);
+			this.numCallsSkipped++;
+		}
+	}
+};

webroot/js/view/list.js

@@ -1,5 +1,6 @@
 import * as domlib from '../domlib';
 import * as gui from '../gui';
+import * as lib from '../lib';
 import * as socket from '../socket';
 import * as store from '../store';
 import config from '../config';
@@ -10,6 +11,7 @@ export class ListView extends View {
 
 	constructor () {
 		super();
+		this.debouncer = new lib.Debouncer(1000, "list render");
 		const table = domlib.newAt(this.el, 'table'),
 			thead = domlib.newAt(table, 'thead');
 
@@ -387,6 +389,10 @@ export class ListView extends View {
 	}
 
 	render () {
+		this.debouncer.run(this.renderView);
+	}
+
+	renderView () {
 		if (this.editing && this.tbody) {
 			return;
 		}