ความแตกต่างระหว่างการควบคุมปริมาณและการเรียกใช้ฟังก์ชัน

ทุกคนสามารถให้คำอธิบายสั้น ๆ กับฉันเกี่ยวกับความแตกต่างระหว่างการควบคุมปริมาณและการเรียกใช้ฟังก์ชันเพื่อวัตถุประสงค์ในการ จำกัด อัตรา

สำหรับฉันทั้งสองดูเหมือนจะทำสิ่งเดียวกัน ฉันได้ตรวจสอบบล็อกทั้งสองนี้เพื่อหา:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

ในการใส่คำศัพท์ง่ายๆ:

• การควบคุมปริมาณจะชะลอการเรียกใช้ฟังก์ชัน มันจะลดการแจ้งเตือนของเหตุการณ์ที่เกิดขึ้นหลายครั้ง
• การ debouncingจะรวมชุดการเรียกตามลำดับเป็นฟังก์ชันเป็นการเรียกครั้งเดียวไปยังฟังก์ชันนั้น ช่วยให้มั่นใจได้ว่ามีการแจ้งเตือนหนึ่งเหตุการณ์สำหรับเหตุการณ์ที่เกิดไฟหลายครั้ง

คุณสามารถเห็นความแตกต่างที่มองเห็นได้ที่นี่

หากคุณมีฟังก์ชั่นที่เรียกว่าเป็นจำนวนมาก - ตัวอย่างเช่นเมื่อเกิดเหตุการณ์การปรับขนาดหรือการเลื่อนเมาส์เกิดขึ้นสามารถเรียกได้หลายครั้ง หากคุณไม่ต้องการพฤติกรรมนี้คุณสามารถเร่งความเร็วได้เพื่อให้เรียกใช้ฟังก์ชันตามช่วงเวลาปกติ การลบล้างจะหมายถึงการเรียกใช้ที่ส่วนท้าย (หรือเริ่ม) ของเหตุการณ์ต่างๆ

ส่วนตัวผมพบdebounceยากที่จะเข้าใจกว่าเค้น

เนื่องจากทั้งสองฟังก์ชั่นช่วยให้คุณเลื่อนเวลาและลดอัตราการดำเนินการบางอย่างได้ สมมติว่าคุณกำลังเรียกฟังก์ชั่นการตกแต่งที่ส่งคืนโดย throttle / debounce ซ้ำ ๆ ...

• Throttle : ฟังก์ชั่นดั้งเดิมจะถูกเรียกอย่างมากที่สุดหนึ่งครั้งต่อช่วงเวลาที่ระบุ
• debounce : ฟังก์ชั่นเดิมจะเรียกได้ว่าหลังจากที่โทรหยุดการเรียกฟังก์ชั่นการตกแต่งหลังจากระยะเวลาที่กำหนด

ฉันพบส่วนสุดท้ายของการหักล้างสิ่งสำคัญเพื่อเข้าใจเป้าหมายที่พยายามบรรลุ ฉันยังพบเวอร์ชันเก่าของการใช้งาน _.debounce ช่วยทำความเข้าใจ (ความอนุเคราะห์จากhttps://davidwalsh.name/function-debounce )

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

คำเปรียบเทียบที่ลึกซึ้ง แต่อาจช่วยได้เช่นกัน

คุณมีเพื่อนชื่อ Chatty ที่ชอบคุยกับคุณผ่าน IM สมมติว่าเมื่อเธอพูดถึงเธอส่งข้อความใหม่ทุก 5 วินาทีในขณะที่ไอคอนแอปพลิเคชัน IM ของคุณมีการตีกลับขึ้นและลงคุณสามารถรับ ...

• วิธีการไร้เดียงสา : ตรวจสอบทุกข้อความตราบเท่าที่มาถึง เมื่อไอคอนแอพของคุณเด้งตรวจสอบ มันไม่ใช่วิธีที่มีประสิทธิภาพที่สุด แต่คุณเป็นคนทันสมัยอยู่เสมอ
• วิธีเค้น : คุณตรวจสอบทุกๆ 5 นาที (เมื่อมีใหม่) เมื่อมีข้อความใหม่มาถึงหากคุณตรวจสอบได้ตลอดเวลาใน 5 นาทีสุดท้ายให้ข้ามไป คุณประหยัดเวลาด้วยวิธีนี้ในขณะที่ยังอยู่ในลูป
• Debounce approach: คุณรู้จัก Chatty เธอแบ่งเรื่องราวทั้งหมดออกเป็นชิ้น ๆ ส่งพวกเขาในข้อความเดียว คุณรอจนกว่าช่างพูดจบเรื่องราวทั้งหมด: ถ้าเธอหยุดส่งข้อความ 5 นาทีคุณจะถือว่าเธอเสร็จแล้วตอนนี้คุณตรวจสอบทั้งหมด

ความแตกต่าง

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

คำอธิบายโดยใช้กรณี :

• แถบค้นหา -ไม่ต้องการค้นหาทุกครั้งที่ผู้ใช้กดปุ่มใช่ไหม ต้องการค้นหาเมื่อผู้ใช้หยุดพิมพ์ 1 วินาที ใช้debounce1 วินาทีในการกดปุ่ม

• เกมยิงปืนพกใช้เวลา 1 วินาทีระหว่างการยิงแต่ละครั้ง แต่ผู้ใช้คลิกเมาส์หลายครั้ง ใช้throttleในการคลิกเมาส์

การย้อนกลับบทบาทของพวกเขา :

• การควบคุมปริมาณ 1 วินาทีในแถบค้นหา - หากประเภทผู้ใช้กับตัวละครในทุกabcdefghij 0.6 secจากนั้นเค้นจะกระตุ้นเมื่อaกดครั้งแรก มันจะไม่สนใจการกดทุกครั้งสำหรับ 1 วินาทีถัดไปเช่นbที่ 0.6 วินาทีจะถูกละเว้น จากนั้นcเวลา 1.2 วินาทีจะทริกเกอร์อีกครั้งซึ่งจะรีเซ็ตเวลาอีกครั้ง ดังนั้นdจะถูกละเว้นและeจะถูกเรียก

• เปิดตัวปืนพก 1 วินาที -เมื่อผู้ใช้เห็นศัตรูเขาคลิกเมาส์ แต่มันจะไม่ยิง เขาจะคลิกอีกหลายครั้งในวินาทีนั้น แต่มันจะไม่ยิง เขาจะดูว่ามันยังมีกระสุนหรือไม่ในเวลานั้น (1 วินาทีหลังจากคลิกสุดท้าย) ปืนพกจะยิงโดยอัตโนมัติ

การควบคุมปริมาณใช้จำนวนครั้งสูงสุดที่ฟังก์ชันสามารถเรียกใช้เมื่อเวลาผ่านไป เช่นเดียวกับ "เรียกใช้ฟังก์ชั่นนี้มากที่สุดทุกๆ 100 มิลลิวินาที"

การเปิดใช้งานบังคับให้ฟังก์ชันไม่ถูกเรียกอีกครั้งจนกว่าระยะเวลาที่แน่นอนจะผ่านไปโดยที่ไม่มีการเรียกใช้ เช่นเดียวกับใน "สั่งงานฟังก์ชั่นนี้เฉพาะเมื่อ 100 มิลลิวินาทีผ่านไปโดยที่ไม่มีการเรียกใช้"

อ้าง

Throttle (1 วินาที):สวัสดีฉันเป็นหุ่นยนต์ ตราบใดที่คุณคอยฉันฉันจะคุยกับคุณ แต่หลังจากนั้น 1 วินาที หากคุณส่งคำตอบก่อนที่จะผ่านไปหนึ่งวินาทีฉันจะตอบคุณในช่วงเวลา 1 วินาที กล่าวอีกนัยหนึ่งฉันชอบที่จะตอบในช่วงเวลาที่แน่นอน

Debounce (1 วินาที):สวัสดีฉันคือลูกพี่ลูกน้องของหุ่นยนต์ ^^ ตราบใดที่คุณให้กระตุกฉันฉันจะยังคงเงียบเพราะผมชอบที่จะตอบเฉพาะหลังจาก 1 วินาทีที่ผ่านไปมาตั้งแต่ครั้งสุดท้ายที่คุณส่ง Ping ฉัน ฉันไม่รู้ถ้าเป็นเพราะฉันมีปัญหาเรื่องทัศนคติหรือเพราะฉันไม่ชอบที่จะรบกวนผู้คน กล่าวอีกนัยหนึ่งหากคุณขอให้ฉันตอบกลับก่อน 1 วินาทีนับตั้งแต่การขอครั้งสุดท้ายคุณจะไม่ได้รับคำตอบ ใช่ ... ไปเลย! โทรหาฉันหยาบคาย

Throttle (10 นาที):ฉันเป็นเครื่องบันทึก ฉันส่งบันทึกระบบไปยังเซิร์ฟเวอร์เบื้องหลังของเราหลังจากช่วงเวลาปกติ 10 นาที

เปิดตัว (10 วินาที):สวัสดีฉันไม่ใช่ลูกพี่ลูกน้องของเครื่องบันทึก (ไม่ใช่debouncerทุกคนที่เกี่ยวข้องกับthrottlerในโลกจินตนาการนี้) ฉันทำงานเป็นพนักงานเสิร์ฟในร้านอาหารใกล้เคียง ฉันควรจะบอกให้คุณรู้ว่าตราบใดที่คุณยังเพิ่มรายการสั่งซื้อของคุณฉันจะไม่ไปที่ห้องครัวเพื่อดำเนินการตามคำสั่งซื้อของคุณ เมื่อผ่านไป 10 วินาทีหลังจากที่คุณแก้ไขคำสั่งซื้อของคุณครั้งสุดท้ายฉันจะถือว่าคุณทำตามคำสั่งซื้อของคุณแล้ว ฉันจะทำตามคำสั่งของคุณในห้องครัวเท่านั้น

ตัวอย่างที่ยอดเยี่ยม: https://css-tricks.com/debouncing-throttling-explained-examples/

เครดิตสำหรับการเปรียบเทียบบริกร: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

การเปิดใช้งานช่วยให้คุณจัดการความถี่ของการโทรที่ฟังก์ชั่นสามารถรับได้ มันรวมหลายสายที่เกิดขึ้นในฟังก์ชั่นที่กำหนดเพื่อให้สายซ้ำที่เกิดขึ้นก่อนที่จะหมดอายุของช่วงเวลาที่กำหนดจะถูกละเว้น โดยทั่วไปแล้วการ debouncing ทำให้แน่ใจได้ว่ามีการส่งสัญญาณหนึ่งสัญญาณสำหรับเหตุการณ์ที่อาจเกิดขึ้นหลายครั้ง

การควบคุมปริมาณจำกัด ความถี่ของการโทรที่ฟังก์ชั่นได้รับในช่วงเวลาคงที่ มันถูกใช้เพื่อให้มั่นใจว่าฟังก์ชั่นเป้าหมายไม่ได้ถูกเรียกใช้บ่อยกว่าความล่าช้าที่ระบุ การควบคุมปริมาณคือการลดอัตราการเกิดซ้ำ

มันง่ายมาก

พวกเขาทำสิ่งเดียวกันแน่นอน (จำกัด อัตรา) ยกเว้นในขณะที่เค้นถูกเรียกมันจะยิงฟังก์ชันห่อของคุณเป็นระยะและdebounceจะไม่ Debounce เพียงแค่พยายามโทรหาฟังก์ชั่นของคุณหนึ่งครั้ง

ตัวอย่าง : หากคุณกำลังเลื่อนคันเร่งจะเรียกฟังก์ชันของคุณอย่างช้าๆในขณะที่คุณเลื่อน (ทุกๆ X มิลลิวินาที) Debounce จะรอจนกระทั่งหลังจากคุณเลื่อนเสร็จเพื่อเรียกฟังก์ชั่นของคุณ

ในแง่ของคนธรรมดา:

การเปิดใช้งานจะป้องกันไม่ให้ฟังก์ชันทำงานในขณะที่ยังคงมีการเรียกใช้บ่อยครั้ง ฟังก์ชั่น debounce จะทำงานหลังจากได้รับการพิจารณาแล้วว่ามันไม่ได้ถูกเรียกอีกต่อไป ณ จุดนี้มันจะทำงานทันที ตัวอย่างการปฏิบัติของการ debouncing:

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

• การบันทึกตำแหน่งที่ผู้ใช้วางเมาส์: ผู้ใช้ไม่ขยับเมาส์อีกต่อไปดังนั้นตำแหน่ง (สุดท้าย) สามารถบันทึกได้

การควบคุมปริมาณจะป้องกันไม่ให้ฟังก์ชั่นการทำงานหากทำงานเร็ว ๆ นี้โดยไม่คำนึงถึงความถี่ในการโทร ตัวอย่างการปฏิบัติของการควบคุมปริมาณ:

• การใช้งาน v-sync ขึ้นอยู่กับการควบคุมปริมาณ: หน้าจอจะถูกวาดขึ้นเมื่อ 16ms ผ่านไปนับตั้งแต่การวาดหน้าจอสุดท้าย ไม่ว่าจะมีการเรียกใช้ฟังก์ชันรีเฟรชหน้าจอกี่ครั้ง แต่จะทำงานได้มากที่สุดทุก ๆ 16ms

การเปรียบเทียบในชีวิตจริงที่ช่วยให้ฉันจำได้ว่า:

• debounce = การสนทนา คุณรอให้อีกฝ่ายพูดให้เสร็จก่อนที่จะตอบ
• เค้น = บิตกลอง คุณเล่นโน้ตได้ง่าย ๆ บนกลอง 4/4

ใช้กรณีสำหรับdebounce :

• การพิมพ์ คุณต้องการทำอะไรบางอย่างหลังจากที่ผู้ใช้หยุดพิมพ์ ดังนั้นการรอ 1 วินาทีหลังจากการกดแป้นครั้งสุดท้ายนั้นสมเหตุสมผล การกดแป้นแต่ละครั้งจะรีสตาร์ทการรอ
• นิเมชั่น คุณต้องการลดขนาดองค์ประกอบหลังจากที่ผู้ใช้หยุดการวางเมาส์เหนือองค์ประกอบ การไม่ใช้ debounce อาจทำให้เกิดภาพเคลื่อนไหวที่ผิดปกติเนื่องจากเคอร์เซอร์เคลื่อนไหวโดยไม่ตั้งใจระหว่างโซน "ร้อน" และ "เย็น"

ใช้กรณีสำหรับเค้น :

• เลื่อน คุณต้องการตอบสนองต่อการเลื่อน แต่ จำกัด จำนวนการคำนวณที่ทำดังนั้นการทำทุก ๆ 100ms ก็เพียงพอที่จะป้องกันความล่าช้าที่อาจเกิดขึ้น
• เลื่อนเมาส์ เช่นเดียวกับการเลื่อน แต่สำหรับการเลื่อนเมาส์
• การโทรแบบ APIคุณต้องการเริ่มการโทรแบบ API กับเหตุการณ์ UI บางอย่าง แต่ต้องการ จำกัด จำนวนการโทรแบบ API ที่คุณไม่ให้เซิร์ฟเวอร์ทำงานหนักเกินไป

throtleเป็นเพียงห่อหุ้มรอบdebounceซึ่งทำให้debounceจะเรียกผ่านfunctionในระยะเวลาหนึ่งถ้าdebounceความล่าช้าในการเรียกฟังก์ชั่นในช่วงเวลาที่มีขนาดใหญ่ที่ระบุไว้แล้วในthrotle

Library lodash แนะนำบทความต่อไปนี้https://css-tricks.com/debouncing-throttling-explained-examples/ซึ่งมีรายละเอียดอธิบายความแตกต่างระหว่างDebounceและThrottleและการกำเนิดของพวกเขา

การอุด

การควบคุมปริมาณบังคับจำนวนครั้งสูงสุดที่ฟังก์ชันสามารถเรียกใช้การทำงานล่วงเวลาได้ เช่นเดียวกับ "เรียกใช้ฟังก์ชั่นนี้มากที่สุดทุกๆ 100 มิลลิวินาที" พูดภายใต้สถานการณ์ปกติคุณจะเรียกใช้ฟังก์ชันนี้ 1,000 ครั้งในเวลา 10 วินาที หากคุณเค้นมันเพียงครั้งเดียวต่อ 100 มิลลิวินาทีมันจะใช้งานฟังก์ชั่นนั้นได้มากที่สุด 100 ครั้งเท่านั้น

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

Debouncing

การเปิดใช้งานบังคับให้ฟังก์ชันไม่ถูกเรียกอีกครั้งจนกว่าระยะเวลาที่แน่นอนจะผ่านไปโดยที่ไม่มีการเรียกใช้ เช่นเดียวกับใน "สั่งงานฟังก์ชั่นนี้เฉพาะเมื่อ 100 มิลลิวินาทีผ่านไปโดยที่ไม่มีการเรียกใช้"

บางทีฟังก์ชั่นนี้เรียกว่า 1,000 ครั้งในการถ่ายภาพต่อเนื่องอย่างรวดเร็วแยกย้ายกันเป็นเวลา 3 วินาทีจากนั้นหยุดเรียก หากคุณ deb deb มันที่ 100 มิลลิวินาทีฟังก์ชั่นจะยิงเพียงครั้งเดียวที่ 3.1 วินาทีเมื่อระเบิดออกมา ทุกครั้งที่มีการเรียกใช้ฟังก์ชันในระหว่างการถ่ายภาพต่อเนื่องจะรีเซ็ตตัวจับเวลา debouncing

แหล่งที่มา: - เค้นและ debouncing

สมมติว่าเรามีฟังก์ชันการเรียกกลับ "cb" ที่จะเรียกใช้ในเหตุการณ์ "E" ให้ "E" ถูกเรียก 1,000 ครั้งใน 1 วินาทีดังนั้นจะมี 1,000 การเรียกไปที่ "cb" นั่นคือ 1 โทร / ms เพื่อเพิ่มประสิทธิภาพเราสามารถใช้:

• การควบคุมปริมาณ : ด้วยการควบคุมปริมาณ (100ms) "cb" จะถูกเรียกใช้ใน [100th ms, 200th ms, 300th ms, ... 1000th ms] นั่นคือ 1 การโทร / 100 ms ที่นี่ 1,000 สายไปที่ "cb" ปรับให้เหมาะสมกับ 10 สาย
• การเปิดตัว : ด้วยการเปิดตัว (100ms) "cb" จะถูกเรียกเพียงครั้งเดียวใน [1100th วินาที] นั่นคือ 100ms หลังจากทริกเกอร์สุดท้ายของ "E" ซึ่งเกิดขึ้นเมื่อ [1000th ms] ที่นี่ 1,000 สายไปที่ "cb" ปรับให้เหมาะกับ 1 สาย

เท่าที่ฉันเข้าใจในเงื่อนไขง่ายๆการควบคุมปริมาณ - คล้ายกับการเรียก setInterval (โทรกลับ) สำหรับจำนวนครั้งที่แน่นอนเช่นการเรียกฟังก์ชั่นเดียวกันสำหรับจำนวนครั้งในช่วงเวลาที่เกิดเหตุการณ์และ .. debouncing - คล้ายกับการโทร setTImeout (callbackForApi) หรือการเรียกฟังก์ชันหลังจากเวลาผ่านไปตามเหตุการณ์ที่เกิดขึ้น ลิงค์นี้จะมีประโยชน์ - https://css-tricks.com/the-difference-between-throttling-and-debouncing/

การ debouncingทำให้ฟังก์ชันสามารถเรียกใช้งานได้หลังจากระยะเวลาหนึ่งนับตั้งแต่ถูกเรียกใช้ครั้งสุดท้ายเท่านั้น

function debounce(func,wait){
  let timeout
  return(...arg) =>{
    clearTimeout(timeout);
    timeout= setTimeout(()=>func.apply(this,arg),wait)
  }
}


function SayHello(){
  console.log("Jesus is saying hello!!")
}


let x = debounce(SayHello,3000)
x()

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

function throttle(callback, interval) {
  let enableCall = true;

  return (...args)=> {
    if (!enableCall) return;

    enableCall = false;
    callback.apply(this, args);
    setTimeout(() => enableCall = true, interval);
  }
}


function helloFromThrottle(){
  console.log("Jesus is saying hi!!!")
}

const foo = throttle(helloFromThrottle,5000)
foo()