bk408 · bk408 · Jul 29, 2023 · Jul 29, 2023
diff --git a/Debouncing & Throttling/debounce.js b/Debouncing & Throttling/debounce.js
@@ -0,0 +1,19 @@
+// Question 1 > Create a button UI and debounce as follows =>
+// --> Show "Button Pressed <X> Times" every time button is pressed
+// --> Increase "Triggered <Y> Times"  Count after 800ms of debounce
+
+/*const btn = document.querySelector(".increment_btn");
+const btnPress = document.querySelector(".increment_pressed");
+const Count = document.querySelector(".increment_count");
+
+var pressedCount = 0;
+var triggerCount = 0;
+
+const debounceCount = _.debounce(() => {
+  Count.innerHTML = ++triggerCount;
+}, 800);
+
+btn.addEventListener("click", () => {
+    btnPress.innerHTML = ++pressedCount;
+    debounceCount();
+}); */
diff --git a/Debouncing & Throttling/debouncePolyfill.js b/Debouncing & Throttling/debouncePolyfill.js
@@ -0,0 +1,29 @@
+//  Question - 3 > Create Debounce() Polyfill Implementation
+
+/* const btn = document.querySelector(".increment_btn");
+const btnPress = document.querySelector(".increment_pressed");
+const Count = document.querySelector(".increment_count");
+
+var pressedCount = 0;
+var triggerCount = 0;
+
+const myDebounce = (cb, d) => {
+    let timer;
+
+    return function (...args) {
+
+        if(timer) clearTimeout(timer)
+        timer = setTimeout(() => {
+            cb(...args);
+        }, d);
+    }
+}
+
+const debounceCount = myDebounce(() => {
+  Count.innerHTML = ++triggerCount;
+}, 800);
+
+btn.addEventListener("click", () => {
+    btnPress.innerHTML = ++pressedCount;
+    debounceCount();
+});  */
diff --git a/Debouncing & Throttling/index.html b/Debouncing & Throttling/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Debouncing & Throttling</title>
+    <link rel="stylesheet" href="style.css" />
+  </head>
+  <body>
+    <div>
+      <h1>Debouncing & Throttling</h1>
+    </div>
+    <button class="increment_btn">Increment</button>
+    <p>Button Pressed<span class="increment_pressed">0</span> Times</p>
+    <p>Triggered<span class="increment_count">0</span> Times</p>
+    <script
+      src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"
+      integrity="sha512-WFN04846sdKMIP5LKNphMaWzU7YpMyCU245etK3g/2ARYbPK9Ub18eG+ljU96qKRCWh+quCY7yefSmlkQw1ANQ=="
+      crossorigin="anonymous"
+      referrerpolicy="no-referrer"
+    ></script>
+    <script src="debounce.js"></script>
+    <script src="throttle.js"></script>
+    <script src="debouncePolyfill.js"></script>
+    <script src="throttlePolyfill.js"></script>
+  </body>
+</html>
diff --git a/Debouncing & Throttling/style.css b/Debouncing & Throttling/style.css
@@ -0,0 +1,3 @@
+body {
+  background-color: rgb(229, 242, 246);
+}
diff --git a/Debouncing & Throttling/throttle.js b/Debouncing & Throttling/throttle.js
@@ -0,0 +1,19 @@
+// Question 2 > Create a button UI and debounce as follows =>
+// --> Show "Button Pressed <X> Times" every time button is pressed
+// --> Increase "Triggered <Y> Times"  every 800ms of throttle
+
+/*const btn = document.querySelector(".increment_btn");
+const btnPress = document.querySelector(".increment_pressed");
+const Count = document.querySelector(".increment_count");
+
+var pressedCount = 0;
+var triggerCount = 0;
+
+const throttleCount = _.throttle(() => {
+  Count.innerHTML = ++triggerCount;
+}, 800);
+
+btn.addEventListener("click", () => {
+  btnPress.innerHTML = ++pressedCount;
+  throttleCount();
+}); */
diff --git a/Debouncing & Throttling/throttlePolyfill.js b/Debouncing & Throttling/throttlePolyfill.js
@@ -0,0 +1,28 @@
+//  Question - 4 > Create Throttle() Polyfill Implementation
+
+const btn = document.querySelector(".increment_btn");
+const btnPress = document.querySelector(".increment_pressed");
+const Count = document.querySelector(".increment_count");
+
+var pressedCount = 0;
+var triggerCount = 0;
+
+const myThrottle = (cb, d) => {
+  let last = 0;
+
+  return (...args) => {
+    let now = new Date().getTime();
+    if (now - last < d) return;
+    last = now;
+    return cb(...args);
+  };
+};
+
+const throttleCount = myThrottle(() => {
+  Count.innerHTML = ++triggerCount;
+}, 800);
+
+btn.addEventListener("click", () => {
+  btnPress.innerHTML = ++pressedCount;
+  throttleCount();
+});