คันเร่ง
คันเร่งที่เรากำลังพูดถึงที่นี่หมายถึงฟังก์ชั่นการควบคุมปริมาณ เพื่อให้ง่ายขึ้นตัวควบคุมความถี่ของการเรียกใช้ฟังก์ชันคือการควบคุมช่วงเวลาอย่างต่อเนื่อง สถานการณ์แอปพลิเคชันหลักเช่น:
1. เหตุการณ์การย้ายเมาส์
2. การวางตำแหน่งไดนามิกขององค์ประกอบ DOM ปรับขนาดและเลื่อนเหตุการณ์ของวัตถุหน้าต่าง
บางคนเปรียบเทียบเหตุการณ์ที่กล่าวถึงข้างต้นอย่างชัดเจนกับการโจมตีของปืนกล คันเร่งเป็นตัวกระตุ้นของปืนกล หากคุณไม่ใส่ทริกเกอร์มันจะยิงต่อไป เช่นเดียวกับเหตุการณ์ข้างต้นที่เราใช้ในระหว่างการพัฒนา หากคุณไม่ปล่อยเมาส์เหตุการณ์ของมันจะถูกกระตุ้นเสมอ ตัวอย่างเช่น:
การคัดลอกรหัสมีดังนี้:
var resizetimer = null;
$ (หน้าต่าง) .on ('ปรับขนาด', function () {
if (resizetimer) {
ClearTimeOut (Resizetimer)
-
resizetimer = settimeout (function () {
console.log ("หน้าต่างปรับขนาด");
}, 400);
การลบล้าง
Debounce คล้ายกับคันเร่งมาก Debounce เป็นวิธีการที่จะดำเนินการเมื่อเวลาว่างจะต้องมากกว่าหรือเท่ากับค่าที่แน่นอน Debounce คือการควบคุมช่วงเวลาของเวลาว่าง ตัวอย่างเช่นเมื่อเราทำการเติมข้อความอัตโนมัติเราจำเป็นต้องควบคุมช่วงเวลาของการเรียกใช้วิธีการเมื่อป้อนข้อความ โดยทั่วไปอักขระอินพุตตัวแรกจะเริ่มโทรทันทีและวิธีการที่ดำเนินการจะเรียกซ้ำ ๆ ตามช่วงเวลาที่กำหนด มันมีประโยชน์อย่างยิ่งสำหรับอินพุตที่ผิดปกติเช่นการค้างไว้ที่หนึ่งและไม่วางไว้
สถานการณ์แอปพลิเคชั่นหลักของ debounce คือ:
เหตุการณ์คีย์ดาวน์อินพุตข้อความเหตุการณ์ KeyUp ตัวอย่างเช่นการเติมข้อความอัตโนมัติ
มีวิธีการมากมายสำหรับออนไลน์ประเภทนี้เช่น Underscore.js ห่อหุ้มเค้นและ debounce JQuery ยังมีปลั๊กอินสำหรับคันเร่งและ debounce: JQuery Throttle/Debounce หลักการทั้งหมดเหมือนกันและมีการใช้ฟังก์ชั่นเดียวกัน นี่คือฟังก์ชั่นการควบคุมคันเร่งและการควบคุมเดบิวต์ที่ฉันใช้อีกครั้ง:
การคัดลอกรหัสมีดังนี้:
-
* เมื่อฟังก์ชั่นการส่งคืนความถี่ควบคุมอย่างต่อเนื่องความถี่ในการดำเนินการของ FN จะถูก จำกัด ไว้ที่กี่ครั้งที่ดำเนินการทุกครั้ง
* @param fn {function} ฟังก์ชั่นที่จำเป็นต้องเรียก
* @param delay {number} เวลาหน่วงในมิลลิวินาที
* @param ทันที {bool} ส่งเท็จไปยังพารามิเตอร์ทันทีฟังก์ชันที่ถูกผูกไว้จะถูกดำเนินการก่อนแทนที่จะล่าช้าแล้วดำเนินการ
* @return {function} เรียกใช้ฟังก์ชันจริง
-
var throttle = function (fn, delay, ทันที, debounce) {
var curr = +วันที่ใหม่ (), // เหตุการณ์ปัจจุบัน
last_call = 0,
last_exec = 0,
ตัวจับเวลา = null
diff, // ความแตกต่างของเวลา
บริบท // บริบท
Args,
exec = function () {
last_exec = curr;
fn.apply (บริบท, args);
-
return function () {
CURR = +วันที่ใหม่ ();
บริบท = สิ่งนี้
args = อาร์กิวเมนต์
diff = curr - (debounce? last_call: last_exec) - ล่าช้า;
ClearTimeout (ตัวจับเวลา);
ถ้า (debounce) {
ถ้า (ทันที) {
timer = settimeout (exec, delay);
} อื่นถ้า (diff> = 0) {
exec ();
-
} อื่น {
ถ้า (diff> = 0) {
exec ();
} อื่นถ้า (ทันที) {
timer = settimeout (exec, -diff);
-
-
last_call = curr;
-
-
-
* เมื่อฟังก์ชั่นการส่งคืนการควบคุมไม่ได้ใช้งานอย่างต่อเนื่องเวลาว่างจะต้องมากกว่าหรือเท่ากับความล่าช้าก่อนที่ FN จะถูกดำเนินการ
* @param fn {function} ฟังก์ชันที่จะเรียก
* @param delay {number} เวลาว่าง
* @param ทันที {bool} ส่งเท็จไปยังพารามิเตอร์ทันทีฟังก์ชันที่ถูกผูกไว้จะถูกดำเนินการก่อนแทนที่จะล่าช้าแล้วดำเนินการ
* @return {function} เรียกใช้ฟังก์ชันจริง
-
var debounce = function (fn, delay, ทันที) {
Return Throttle (FN, ล่าช้า, ทันที, จริง);