เปิดตัว
เดี้ยง ไม่ได้เป็นอะไรนอกจากการลดการคำนวณที่เสียเวลาโดยไม่จำเป็นเพื่อเพิ่มประสิทธิภาพเบราว์เซอร์ มีบางสถานการณ์ที่ฟังก์ชันบางอย่างต้องใช้เวลามากขึ้นในการดำเนินการบางอย่าง ตัวอย่างเช่น ยกตัวอย่าง แถบค้นหา ในเว็บไซต์อีคอมเมิร์ซ
บทสรุป
สมมติว่าผู้ใช้ต้องการรับ "ชุดการเรียนรู้ Tutorix" . เขาพิมพ์ทุกตัวอักษรของผลิตภัณฑ์ในแถบค้นหา หลังจากพิมพ์อักขระแต่ละตัว จะมี Api การโทรเกิดขึ้นจากเบราว์เซอร์ไปยังเซิร์ฟเวอร์เพื่อรับผลิตภัณฑ์ที่ต้องการ เนื่องจากเขาต้องการ "ชุดเครื่องมือการศึกษา Tutorix" ผู้ใช้จึงต้องโทร 17 Api จากเบราว์เซอร์หนึ่งไปยังอีกเซิร์ฟเวอร์หนึ่ง ลองนึกถึงสถานการณ์ที่เมื่อผู้คนนับล้านทำการค้นหาแบบเดียวกันที่นั่นโดยเรียก Api's นับพันล้านคน . ดังนั้นการเรียก API หลายพันล้านครั้งในแต่ละครั้งจะนำไปสู่ประสิทธิภาพของเบราว์เซอร์ที่ช้าลงอย่างแน่นอน . เพื่อลดข้อเสียนี้ ปฏิเสธ เข้ารูป
ในสถานการณ์สมมตินี้ การดีเบต จะกำหนดช่วงเวลา ประมาณ 2 วินาที ระหว่างการกดแป้นสองครั้ง หากเวลาระหว่างการกดแป้นสองครั้งเกิน 2 วินาที จะมีการเรียกเฉพาะ Api เท่านั้น ใน 2 วินาทีนั้น ผู้ใช้อาจพิมพ์อักขระอย่างน้อยบางตัว ซึ่งลดจำนวนอักขระที่เรียก Api ลง เนื่องจากการโทร Api ลดลง ประสิทธิภาพของเบราว์เซอร์จึงเพิ่มขึ้น เราต้องคอยสังเกตว่า การทรุดตัว อัปเดตฟังก์ชันสำหรับทุกการกดแป้น
ตัวอย่างสรุป
ในตัวอย่างต่อไปนี้ ปุ่มจะแนบมากับ ตัวฟังเหตุการณ์ ที่เรียก ดีเบต การทำงาน. ดีเบต ฟังก์ชันมี 2 พารามิเตอร์ ตัวหนึ่งเป็นฟังก์ชันและอีกตัวเป็นตัวเลข (เวลา) มีการประกาศตัวจับเวลาซึ่งตามชื่อเรียก ดีบัก ทำงานหลังจากเวลาที่กำหนด
เมื่อ ดีเด้ง เมื่อคลิกปุ่ม กล่องแจ้งเตือนจะเปิดขึ้นและแสดงข้อความ ฟังก์ชันจะอัปเดตทุกครั้ง ซึ่งหมายความว่าหากคลิกปุ่มก่อนเวลาหน่วง (2 วินาที) ตัวจับเวลาเริ่มต้นจะถูกล้างและตัวจับเวลาใหม่จะเริ่มขึ้น เพื่อให้บรรลุภารกิจนี้ 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 วินาที กล่องแจ้งเตือนต่อไปนี้จะแสดงเป็นเอาต์พุต
ผลลัพธ์
