Implements first working version of input debounce

src/editor/js/components/nodedetails.tsx

@@ -11,10 +11,15 @@ type propTypes = {
 };
 
 export class NodeDetails extends React.Component<propTypes> {
+    debounceTimeout: NodeJS.Timeout;
+    debounceArgs: any[];
+    debounceFunc: any;
+
     constructor(props: propTypes) {
         super(props);
         this.handleNodeTypeChange = this.handleNodeTypeChange.bind(this);
         this.handleTextChange = this.handleTextChange.bind(this);
+        this.debounce = this.debounce.bind(this);
     }
 
     private handleNodeTypeChange(event: any) {
@@ -35,17 +40,45 @@ export class NodeDetails extends React.Component<propTypes> {
             return;
         }
 
-        //TODO: Make sure, that this event is not triggered to quickly!
         (this.props.selectedNode as any)[property] = newValue;
-        this.props.selectedNode.graph.storeCurrentData(
-            "Changed " +
-                property +
-                " of node [" +
-                this.props.selectedNode.toString() +
-                "]"
+        this.props.onChange();
+
+        // Save change, but debounce, so it doesn't trigger too quickly
+        this.debounce(
+            (property: string) => {
+                this.props.selectedNode.graph.storeCurrentData(
+                    "Changed " +
+                        property +
+                        " of node [" +
+                        this.props.selectedNode.toString() +
+                        "]"
+                );
+                this.props.onChange();
+            },
+            500,
+            property
         );
+    }
 
-        this.props.onChange();
+    debounce(func: any, wait: number, ...args: any[]) {
+        // It works, don't question it
+        const later = () => {
+            this.debounceTimeout = null;
+            this.debounceFunc(...this.debounceArgs);
+        };
+
+        clearTimeout(this.debounceTimeout);
+        if (
+            this.debounceArgs !== undefined &&
+            args[0] !== this.debounceArgs[0] &&
+            this.debounceFunc !== undefined
+        ) {
+            this.debounceFunc(...this.debounceArgs);
+        }
+
+        this.debounceArgs = args;
+        this.debounceFunc = func;
+        this.debounceTimeout = setTimeout(later, wait);
     }
 
     render(): ReactNode {