Debouncing ใน JavaScript คืออะไร

Debouncing

Debouncing คือเทคนิคลดการคำนวณที่ไม่จำเป็นเพื่อเพิ่มประสิทธิภาพเบราว์เซอร์ มีสถานการณ์ที่ฟังก์ชันบางอย่างใช้เวลานานในการทำงาน ตัวอย่างเช่น Search Bar ในเว็บไซต์อีคอมเมิร์ซ

รายละเอียด

สมมติผู้ใช้ต้องการค้นหา "Tutorix study kit" เขาพิมพ์ทุกตัวอักษรในช่องค้นหา หลังพิมพ์แต่ละตัวจะมี API เรียก จากเบราว์เซอร์ไปเซิร์ฟเวอร์ สำหรับ 17 ตัวอักษร ต้องเรียก API 17 ครั้ง หากมีผู้ใช้หลายล้านคนทำพร้อมกัน จะมีการเรียก API หลายพันล้านครั้ง ทำให้ เบราว์เซอร์ช้าลง Debouncing ช่วยแก้ปัญหานี้

Debouncing จะตั้งช่วงเวลา (เช่น 2 วินาที) ระหว่างการกดปุ่ม ถ้าช่วงเวลาระหว่างการกดเกิน 2 วินาที จึงจะเรียก API ในช่วง 2 วินาที ผู้ใช้อาจพิมพ์หลายตัวอักษร ลดการเรียก API ลง ฟังก์ชัน Debouncing จะอัปเดตทุกครั้งที่กดปุ่ม

สรุปตัวอย่าง

ตัวอย่างมีปุ่มผูกกับ Event Listener เรียกฟังก์ชัน debounce ซึ่งรับ 2 พารามิเตอร์: ฟังก์ชันและเวลา (ms) มี Timer เรียก debounce หลังเวลาที่กำหนด

เมื่อกดปุ่ม debounce จะแสดง Alert ถ้ากดซ้ำภายใน 2 วินาที Timer เดิมจะถูกยกเลิกและเริ่ม Timer ใหม่ ใช้ clearTimeout() เพื่อทำได้

ตัวอย่าง

<html> <body> 
    <input type="button" id="debounce" value="Debounce"> 
    <script> 
        var button = document.getElementById("debounce"); 
        var debounce = (func, delay) => { 
            let timer; 
            return function() { 
                const context = this; 
                const args = arguments; 
                clearTimeout(timer); 
                timer = setTimeout(() => func.apply(context, args), delay); 
            } 
        } 
        button.addEventListener('click', debounce(function() { 
            alert("Hello\nNo matter how many times you " + 
            "click the debounce button, I get " + "executed once every 2 seconds!!"); 
        }, 2000)); 
    </script> 
</body> </html>

หลังรันโค้ดจะแสดงปุ่ม ดังภาพ

หลังกดปุ่มและรอ 2 วินาที จะแสดง Alert ดังภาพ

ผลลัพธ์