debounce input change

src/scripts/common.js

@@ -2,4 +2,5 @@
 export const MODULE_ID = "rush-character-archive-foundry-module";
 
 export const URI_SETTING_NAME = "uri_setting";
-export const API_KEY_NAME = "api_key";
+export const API_KEY_NAME = "api_key";
+

src/ts/apps/CharacterArchiver.ts

@@ -54,7 +54,7 @@ export class CharacterArchiver extends Application {
 
     html
       .find(".character-handle")
-      .on("change", this.handleChange.bind(this));
+      .on("input", this.handleChange.bind(this));
   }
 
   private async archiveButton() {
@@ -80,11 +80,16 @@ export class CharacterArchiver extends Application {
     this.client.createCharacter(request);
   }
 
+  timeout: NodeJS.Timeout | undefined;
+
   private async handleChange(e: Event) {
-    console.log(e.target);
-    const target = e.target as HTMLTextAreaElement;
-    this.data.handle = target.value;
-    console.log(this.data.handle);
+    clearTimeout(this.timeout);
+    this.timeout = setTimeout(() => {
+      console.log(e.target);
+      const target = e.target as HTMLTextAreaElement;
+      this.data.handle = target.value;
+      console.log(this.data.handle);
+    }, 500);
   }
 
 }

src/ts/common.ts

@@ -2,4 +2,17 @@
 export const MODULE_ID = "rush-character-archive-foundry-module";
 
 export const URI_SETTING_NAME = "uri_setting";
-export const API_KEY_NAME = "api_key";
+export const API_KEY_NAME = "api_key";
+
+export function debounce<P extends any[]>(
+  callback: (...args: P) => any, 
+  time: number
+): (...args: P) => void {
+  let timer: NodeJS.Timeout | undefined;
+  return function (this: any, ...args: P) {
+    clearTimeout(timer);
+    timer = setTimeout(() => callback.apply(this, args), time);
+    return timer;
+  }
+
+}