From 7b00afb229ddfdc7b903b9afe7f3073190144941 Mon Sep 17 00:00:00 2001
From: Jen <jengkarlong@gmail.com>
Date: Sat, 15 Jun 2024 17:45:02 +0800
Subject: [PATCH] Add debounce time on event listeners

---
 index.html           | 31 ++++++++++++++++++++++++++++++-
 lib/entity/events.js | 22 +++++++++++++++-------
 2 files changed, 45 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index 208f873..7af21e6 100644
--- a/index.html
+++ b/index.html
@@ -1032,7 +1032,7 @@ <h3 class="font-bold font-mono">On Change Example:</h3>
           <script>
             showSelect = false
           </script>
-          <div class="p-4 border border-dashed border-black rounded mt-2">
+          <div class="p-4 border border-dashed border-black rounded mt-2" :clickout="showSelect = false">
             <div class="flex items-end">
               <div class="flex flex-col w-full">
                 <p class="font-bold font-mono text-sm">Custom Select:</p>
@@ -1107,6 +1107,35 @@ <h3 class="font-bold font-mono">On Change Example:</h3>
                           </svg>
                         </span>
                       </li>
+                      <li
+                        :click="selectedOption = 'Dwight Schrute'"
+                        :class="selectedOption == 'Dwight Schrute' ? 'bg-indigo-600 text-white' : 'text-gray-900' "
+                        class="text-gray-900 relative cursor-default select-none py-2 pl-3 pr-9"
+                        id="listbox-option-0"
+                        role="option"
+                      >
+                        <span
+                          :class="selectedOption == 'Dwight Schrute' ? 'font-semibold' : 'font-normal' "
+                          class="block truncate"
+                          >Dwight Schrute</span
+                        >
+                        <span
+                          class="text-white absolute inset-y-0 right-0 flex items-center pr-4"
+                        >
+                          <svg
+                            class="h-5 w-5"
+                            viewBox="0 0 20 20"
+                            fill="currentColor"
+                            aria-hidden="true"
+                          >
+                            <path
+                              fill-rule="evenodd"
+                              d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z"
+                              clip-rule="evenodd"
+                            />
+                          </svg>
+                        </span>
+                      </li>
                       <li
                         :click="selectedOption = 'Jen Villaganas'"
                         :class="selectedOption == 'Jen Villaganas' ? 'bg-indigo-600 text-white' : 'text-gray-900' "
diff --git a/lib/entity/events.js b/lib/entity/events.js
index 67b314e..167af78 100644
--- a/lib/entity/events.js
+++ b/lib/entity/events.js
@@ -149,16 +149,24 @@ export class Events {
     const listener = this.listener[attr]
     if (!listener) return
 
-    if (Array.isArray(listener)) {
-      listener.forEach(({ el, eventName, event }) => {
-        el.addEventListener(eventName, event)
+    [].concat(listener).forEach(({ el, eventName, event }) => {
+      el.addEventListener(eventName, (e) => {
+        this.debounce(() => {
+          event(e)
+        }, 50)
       })
-    } else {
-      const { el, eventName, event } = listener
-      el.addEventListener(eventName, event)
-    }
+    })
   }
 
+  debounce(callback, wait) {
+    if (this.timeout) return
+    clearTimeout(this.timeout)
+    this.timeout = setTimeout(() => {
+      callback()
+      this.timeout = null
+    }, wait)
+  }
+  
   setChangeEvent() {
     const el = this.entity.element
     const key = ':change'