บทความนี้อธิบายถึงแนวคิดและการใช้งานของ JavaScript Function Throttling แบ่งปันสำหรับการอ้างอิงของคุณดังนี้:
เมื่อเร็ว ๆ นี้เมื่อฉันสร้างหน้าเว็บฉันมีข้อกำหนดซึ่งคือการเปลี่ยนขนาดองค์ประกอบบางส่วนเมื่อหน้าต่างเบราว์เซอร์เปลี่ยนไปดังนั้นฉันจึงคิดถึงเหตุการณ์การปรับขนาดของหน้าต่างดังนั้นฉันจึงเขียนสิ่งนี้
<! doctype html> <html> <head> <mheat> คันเร่ง </title> </head> <body> <script type = "text/javascript"> n = 0; ฟังก์ชั่น resizeHandler () {console.log (วันที่ใหม่ (). getTime ()); console.log (++ n); } window.onresize = resizeHandler; </script> </body> </html>ฟังก์ชั่นถูกนำไปใช้ แต่เมื่อฉันลากและวางวิธีที่ฉันเปลี่ยนขนาดหน้าต่างเบราว์เซอร์ฉันดูที่คอนโซล
ถูกต้องการลากและวางอย่างง่ายทำให้วิธีการ resizeHandler () ของฉันดำเนินการ 52 ครั้งซึ่งไม่ใช่เอฟเฟกต์ที่ฉันต้องการเลย อันที่จริงแล้วรหัสของวิธี ResizeHandler () ของฉันนั้นซับซ้อนมากและฉันยังใช้ AJAX เพื่อส่งคำขอไปยังเซิร์ฟเวอร์ ถ้าฉันเพียงแค่เปลี่ยนขนาดหน้าต่างในแต่ละครั้งฉันต้องโทร 52 ครั้ง นี่เป็นเรื่องใหญ่
ฟังก์ชั่นการควบคุมปริมาณ
ในความเป็นจริงความตั้งใจดั้งเดิมของฉันคือการปรับเปลี่ยนหน้าเว็บหลังจากหน้าต่างปรับขนาด เหตุการณ์การปรับขนาดของหน้าต่างจะไม่ถูกกระตุ้นหลังจากการปรับขนาดสิ้นสุดลง ฉันไม่ทราบความถี่ที่เฉพาะเจาะจง แต่มันโทรมาตลอดเวลาจนกว่าขนาดหน้าต่างจะไม่เปลี่ยนแปลง ในความเป็นจริงกลไกที่คล้ายกันและ mousemove จะถูกกระตุ้นซ้ำ ๆ ในช่วงเวลาสั้น ๆ
มีฟังก์ชั่นการควบคุมปริมาณที่จัดการกับปัญหานี้โดยเฉพาะในการเขียนโปรแกรมขั้นสูงของ JavaScript
ฟังก์ชั่นเค้น (วิธีการบริบท) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (บริบท);}, 500);}หลักการนั้นง่ายมาก ใช้ตัวจับเวลาเพื่อชะลอการดำเนินการของฟังก์ชั่น 500 มิลลิวินาที หากมีการเรียกฟังก์ชันอีกครั้งภายใน 500 มิลลิวินาทีการโทรครั้งสุดท้ายจะถูกลบ เวลานี้การโทรจะถูกดำเนินการหลังจาก 500 มิลลิวินาทีและจะทำซ้ำ ด้วยวิธีนี้รหัสของฉันสามารถเปลี่ยนเป็นได้
<script type = "text/javascript"> n = 0; function resizeHandler () {console.log (วันที่ใหม่ (). getTime ()); console.log (++ n);} ฟังก์ชันเค้น (วิธีการบริบท) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (บริบท);}, 500);} window.onresize = function () {throttle (resizeHandler, window);}; </script>ลองลากและลากมันถูกดำเนินการเพียงครั้งเดียว
อีกวิธีหนึ่งในการทำ
นอกจากนี้ยังมีฟังก์ชั่นการควบคุมการควบคุมปริมาณทางออนไลน์ซึ่งทำสิ่งนี้
ฟังก์ชั่นเค้น (วิธีการล่าช้า) {ตัวจับเวลา var = null; return function () {var context = this, args = อาร์กิวเมนต์; ClearTimeout (ตัวจับเวลา); timer = settimeout (function () {method.apply (บริบท, args);}, ล่าช้า); -ลองเรียกมันว่าเอฟเฟกต์เดียวกัน
<script type = "text/javascript"> n = 0; function resizeHandler () {console.log (วันที่ใหม่ (). getTime ()); console.log (++ n);} ฟังก์ชันเค้น (วิธีการล่าช้า) {var timer = null; return function () {var context = this, args = อาร์กิวเมนต์; ClearTimeout (ตัวจับเวลา); timer = settimeout (function () {method.apply (บริบท, args);}, ล่าช้า); }} window.onresize = เค้น (resizeHandler, 500); // เนื่องจากการส่งคืนฟังก์ชั่นถูกส่งคืนจึงไม่จำเป็นต้องห่อฟังก์ชั่น </script>เปรียบเทียบ
ทั้งสองวิธีใช้ settimeout ความแตกต่างคือฟังก์ชั่นที่เพิ่มโดยวิธีที่สองจะทำให้เวลาการดำเนินการลดลง นี่เป็นเรื่องง่ายที่จะมีฟังก์ชั่นนี้ในการแก้ปัญหาครั้งแรกเพิ่มพารามิเตอร์
แต่ตัวเลือกแรกตั้งค่า TID เป็นตัวแปรของฟังก์ชันเพื่อบันทึกในขณะที่ตัวเลือกที่สองสร้างการปิดเพื่อจัดเก็บ โดยส่วนตัวแล้วฉันคิดว่าช่องว่างไม่ใหญ่และฉันชอบอันแรกซึ่งง่ายและมีประสิทธิภาพ
ความต้องการใหม่
วันหนึ่งฉันทำสิ่งที่คล้ายกันเช่นเดียวกับพรอมต์อัตโนมัติสำหรับการป้อนข้อมูลในหน้าแรกของ Baidu ฉันผูกกิจกรรม Keyup บนข้อความ มันแจ้งโดยอัตโนมัติทุกครั้งที่คีย์บอร์ดปรากฏขึ้น แต่ฉันไม่ต้องการแจ้งให้ทราบบ่อยๆ ดังนั้นฉันจึงใช้วิธีการข้างต้น แต่มันก็น่าเศร้า ฉันหยุดอินพุตและรอเพียง 500 มิลลิวินาทีเพื่อแจ้งและไม่มีพรอมต์เลยในระหว่างกระบวนการป้อนข้อมูล ฉันดูรหัสและพบว่ามันไม่เป็นความจริง ตราบใดที่ผู้ใช้พิมพ์อย่างสุ่มสี่สุ่มห้ากดแป้นพิมพ์ภายใน 500 มิลลิวินาทีฟังก์ชั่นพรอมต์จะล่าช้าอย่างต่อเนื่อง สิ่งนี้จะแจ้งเมื่อฉันหยุดซึ่งจะไม่มีความหมาย
สามารถดำเนินการได้หนึ่งครั้งในเวลาที่กำหนดโดยขึ้นอยู่กับการควบคุมปริมาณของฟังก์ชั่นหรือไม่?
การเปลี่ยนแปลงเล็กน้อย
ฉันค้นหาออนไลน์และเราสามารถทำการเปลี่ยนแปลงบางอย่างตามวิธีการเขียนที่สอง (วิธีแรกนั้นไม่ดีเล็กน้อยสำหรับการขยายตัวแปรหลายตัวสำหรับฟังก์ชั่น) และเพิ่มพารามิเตอร์เป็นช่วงเวลาคงที่จะต้องดำเนินการ
ฟังก์ชั่นเค้น (วิธีการล่าช้าระยะเวลา) {ตัวจับเวลา var = null, เริ่มต้น = วันที่ใหม่ (); ฟังก์ชั่น return () {var context = this, args = อาร์กิวเมนต์, current = new date () ;; ClearTimeout (ตัวจับเวลา); if (ปัจจุบัน begin> = ระยะเวลา) {method.apply (บริบท, args); เริ่มต้น = ปัจจุบัน; } else {timer = settimeout (function () {method.apply (บริบท, args);}, ล่าช้า); -ด้วยวิธีนี้เราจะกำหนดระยะเวลา หากเกินเวลาการตั้งค่าเราจะดำเนินการทันที ใช้ตัวอย่างตอนนี้เพื่อลองเอฟเฟกต์
window.onresize = เค้น (resizeHandler, 100,200);
เป็นความจริงที่ว่าไม่มีการดำเนินการบ่อยครั้งหรือการดำเนินการขั้นสุดท้าย
สำหรับข้อมูลเพิ่มเติมเกี่ยวกับเนื้อหาที่เกี่ยวข้องกับ JavaScript โปรดตรวจสอบหัวข้อของไซต์นี้: "สรุปเอฟเฟกต์และเทคนิคการสลับ JavaScript", "สรุปทักษะอัลกอริธึมการค้นหา JavaScript", "สรุปผลการสรุปและเทคนิคการสรุปของ JavaScript ของ JavaScript อัลกอริทึมและเทคนิคการสำรวจ JavaScript "และ" สรุปการใช้งานทางคณิตศาสตร์ JavaScript "
ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับการเขียนโปรแกรม JavaScript ของทุกคน