Debounce กับ Throttle ต่างกันอย่างไร สรุปชัดเจนในบทเดียว

แอปพลิเคชันสมัยใหม่ต้องคอยตอบสนองต่ออีเวนต์ของผู้ใช้อยู่ตลอดเวลา ไม่ว่าจะเป็นการพิมพ์คีย์บอร์ด การเคลื่อนไหวของเมาส์ การเลื่อนหน้าจอ การปรับขนาดหน้าต่าง ไปจนถึงการคลิกปุ่ม หากผู้ใช้พิมพ์คำว่า React ลงในช่องค้นหา ระบบอาจส่งคำขอ API มากถึง 5 ครั้งตามจำนวนตัวอักษรที่พิมพ์ออกมา

การปล่อยให้แอปพลิเคชันประมวลผลตรรกะที่ซับซ้อนสำหรับทุกๆ อีเวนต์ที่เกิดขึ้นอย่างรวดเร็วเกินความจำเป็นจะทำให้ประสิทธิภาพของระบบลดลง เทคนิค Debouncing และ Throttling จึงถูกนำมาใช้เพื่อควบคุมความถี่ในการทำงานของฟังก์ชันเหล่านี้ แม้ว่าทั้งสองวิธีจะมีเป้าหมายคล้ายกันในการจัดการประสิทธิภาพ แต่มีวิธีการทำงานและกรณีใช้งานที่แตกต่างกันอย่างสิ้นเชิง

Debounce ทำหน้าที่รอให้กิจกรรมหยุดลงเสียก่อนจึงค่อยประมวลผล ยกตัวอย่างเช่นช่องค้นหาที่มีการหน่วงเวลา (Delay) 300 มิลลิวินาที เมื่อผู้ใช้พิมพ์ตัวอักษร ตัวจับเวลาจะเริ่มต้นขึ้นและจะถูกรีเซ็ตใหม่ทุกครั้งที่มีการพิมพ์ตัวอักษรตัวใหม่เพิ่มเข้ามา จนกว่าผู้ใช้จะหยุดพิมพ์เป็นเวลา 300 มิลลิวินาทีเต็ม ระบบจึงจะทำการส่งคำขอ API ไปยังเซิร์ฟเวอร์เพียงครั้งเดียว

ภาพประกอบจากคลังภาพสต็อก ไม่ใช่ภาพจากเหตุการณ์จริง

ตัวอย่างกรณีการใช้งาน Debounce ที่เหมาะสม ได้แก่:

• การค้นหา: รอให้ผู้ใช้พิมพ์ข้อความจนเสร็จสิ้นก่อนเริ่มค้นหาข้อมูล
• การบันทึกอัตโนมัติ (Autosave): รอให้ผู้ใช้หยุดพิมพ์เอกสารชั่วขณะจึงทำการบันทึกข้อมูล
• การตรวจสอบความถูกต้องของฟอร์ม (Form validation): รอให้ผู้ใช้หยุดพิมพ์ก่อนตรวจสอบความถูกต้อง
• การกรองข้อมูล: รอจนกว่าผู้ใช้จะเปลี่ยนตัวกรองครบถ้วนก่อนประมวลผลชุดข้อมูล

ในทางกลับกัน Throttling จะใช้วิธีการที่แตกต่างออกไปโดยสิ้นเชิง แทนที่จะรอให้กิจกรรมทั้งหมดหยุดลง Throttling จะอนุญาตให้ฟังก์ชันทำงานได้มากที่สุดเพียงหนึ่งครั้งในช่วงเวลาที่กำหนด เช่น หากกำหนดค่า Throttle ไว้ที่ทุกๆ 200 มิลลิวินาที ระบบจะทำการประมวลผลอีเวนต์ตามรอบเวลาที่ตั้งไว้ แม้ว่าผู้ใช้จะยังคงเลื่อนหน้าจอหรือขยับเมาส์อย่างต่อเนื่องก็ตาม

กรณีการใช้งาน Throttling ที่เหมาะสม ได้แก่:

• การเลื่อนหน้าจอ (Scroll): อัปเดตตำแหน่งหน้าจออย่างต่อเนื่องแต่ไม่ถี่จนเกินไป
• การเคลื่อนไหวของเมาส์ (Mouse movement): ติดตามพิกัดเมาส์เป็นระยะ
• การปรับขนาดหน้าต่าง (Window resizing): คำนวณขนาดองค์ประกอบใหม่ตามช่วงเวลา
• การลากวัตถุกราฟิก (Dragging): อัปเดตพิกัดด้วยอัตราความเร็วที่ควบคุมได้

หลักการตัดสินใจเลือกใช้งานทำได้ง่ายๆ โดยตั้งคำถามว่า "ฉันต้องรอให้กิจกรรมนั้นหยุดลงก่อนจึงค่อยทำอะไรบางอย่างใช่หรือไม่?" หากตอบว่าใช่ ให้เลือกใช้ Debounce แต่ถ้าหากคำถามคือ "ฉันต้องการอัปเดตข้อมูลเป็นระยะขณะที่กิจกรรมยังคงดำเนินต่อไปหรือไม่?" หากตอบว่าใช่ ให้เลือกใช้ Throttle เทคนิคทั้งสองนี้เป็นเครื่องมือพื้นฐานสำคัญที่นักพัฒนาเว็บโดยเฉพาะผู้ใช้งาน React ควรทำความเข้าใจเพื่อสร้างแอปพลิเคชันที่มีประสิทธิภาพสูง

ที่มา: Dev.to