การคำนวณและการประมวลผลในเบราว์เซอร์มีราคาแพงกว่าการคำนวณอื่น ๆ ตัวอย่างเช่นการดำเนินงาน DOM ต้องใช้เวลาหน่วยความจำและ CPU มากกว่าการโต้ตอบที่ไม่ใช่ DOM การพยายามดำเนินการที่เกี่ยวข้องกับ DOM มากเกินไปอย่างต่อเนื่องอาจทำให้เบราว์เซอร์แขวนและบางครั้งก็ผิดพลาด นี่เป็นเรื่องง่ายที่จะเกิดขึ้นโดยเฉพาะเมื่อใช้ตัวจัดการเหตุการณ์ onresize ใน IE เมื่อเบราว์เซอร์ถูกปรับขนาดเหตุการณ์จะถูกเรียกอย่างต่อเนื่อง หากคุณพยายามดำเนินการ DOM ภายในตัวจัดการเหตุการณ์ OnResize การเปลี่ยนแปลงความถี่สูงอาจทำให้เบราว์เซอร์ผิดพลาด
แนวคิดพื้นฐานที่อยู่เบื้องหลังการควบคุมปริมาณของฟังก์ชั่นคือรหัสบางอย่างไม่สามารถดำเนินการซ้ำ ๆ ได้โดยไม่หยุดชะงัก ครั้งแรกที่มีการเรียกใช้ฟังก์ชันตัวจับเวลาจะถูกสร้างขึ้นและรหัสจะเรียกใช้หลังจากช่วงเวลาที่กำหนด เมื่อฟังก์ชั่นเรียกว่าตัวจับเวลาครั้งที่สองจะล้างตัวจับเวลาก่อนหน้าและตั้งค่าอีกอันหนึ่ง หากมีการดำเนินการจับเวลาก่อนหน้านี้การดำเนินการนี้จะไม่มีความหมาย อย่างไรก็ตามหากตัวจับเวลาก่อนหน้านี้ยังไม่ถูกดำเนินการจะถูกแทนที่ด้วยตัวจับเวลาใหม่ วัตถุประสงค์คือการดำเนินการหลังจากการร้องขอเพื่อดำเนินการฟังก์ชั่นได้หยุดลงเป็นระยะเวลาหนึ่ง
ฟังก์ชั่นเค้น (วิธีการบริบท) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (บริบท);}, 100); -ตัวอย่างแอปพลิเคชัน:
สมมติว่ามีองค์ประกอบ <div/> ที่ต้องรักษาความสูงของมันไว้เท่ากับความกว้างเสมอมันสามารถเข้ารหัสได้ดังนี้:
ฟังก์ชั่น resizediv () {var div = document.getElementById ("mydiv"); div.style.height = div.offsetWidth + "px"; } window.onResize = function () {throttle (resizediv); -ที่นี่ฟังก์ชั่น Resize จะถูกใส่ลงในฟังก์ชั่นแยกต่างหากที่เรียกว่า Resizediv และตัวจัดการเหตุการณ์ onresize เรียกว่าเค้น () และผ่านในฟังก์ชัน resizediv แทนที่จะเรียก Resizediv โดยตรง () ในกรณีส่วนใหญ่ผู้ใช้ไม่สามารถรู้สึกถึงการเปลี่ยนแปลงแม้ว่าการคำนวณที่บันทึกไว้ในเบราว์เซอร์อาจมีขนาดใหญ่มาก
ด้านล่างคือการเพิ่มเติมจากชาวเน็ตอื่น ๆ
วันนี้เราเขียนเกี่ยวกับฟังก์ชั่นการควบคุมปริมาณที่เราต้องการในการทำงานประจำวันของเรา เพื่อนบางคนอาจไม่ทราบว่ามีการควบคุมปริมาณ ในความเป็นจริงในการทำงานสถานการณ์หลายอย่างกำหนดให้เราต้อง throttp: //www.sub.com ที่พบมากที่สุดคือการปรับขนาดหน้าจอและ touchmove หรือเหตุการณ์เลื่อน ฉันไม่รู้ว่าฉันได้อ่านบทความที่ฉันเขียนมาก่อนหรือไม่! jQuery กำหนดทิศทางการเลื่อนของหน้าเลื่อนหน้าและ touchmove เมื่อคุณใช้ตัวอย่างเหล่านี้คุณจะพบว่าหน้าเว็บยังคงทริกเกอร์ touchmove หรือเลื่อนเพราะไม่จำเป็นต้องทาสีหน้าใหม่ดังนั้นฉันไม่ได้ใช้ฟังก์ชัน JavaScript เพื่อเค้นที่นี่ อย่างไรก็ตามเมื่อเราใช้ window.onresize เหตุการณ์การปรับขนาดจะถูกเรียกอย่างต่อเนื่อง! สิ่งนี้จะเกี่ยวข้องกับปัญหาการทาสีหน้าใหม่ ดังนั้นเมื่อปรับขนาดหน้าต่างเราขอแนะนำให้คุณใช้การควบคุมปริมาณของฟังก์ชั่น!
บทนำเกี่ยวกับการควบคุมปริมาณของฟังก์ชัน JavaScript
หากคุณรู้สึกท่วมท้นไปด้วยข้อความขนาดใหญ่กับฉันมันก็ไม่สำคัญ ฉันจะให้ตัวอย่างสั้น ๆ แก่คุณเพื่อแสดงฟังก์ชั่นการควบคุมปริมาณที่นี่! ตัวอย่างเช่นเมื่อเราใช้
$ (window) .resize (function () {console.log ("หน้าต่าง haorooms ปรับขนาด");})คุณจะพบ:
มันจะเป็นเอาต์พุตหลายครั้งที่นี่ เราเพียงแค่แคบหน้าต่างและมันจะทริกเกอร์ต่อไป!
ด้วยวิธีนี้เมื่อใช้ DIV บ่อยครั้งหน้าจะถูกวาดใหม่อย่างต่อเนื่อง หากคุณพบ IE ที่มีรุ่นค่อนข้างต่ำเบราว์เซอร์อาจผิดพลาด! เพื่อหลีกเลี่ยงสิ่งนี้เราสามารถใช้วิธีการควบคุมปริมาณของฟังก์ชั่น แนวคิดพื้นฐานคือ: เมื่อมีการเรียกฟังก์ชั่นเป็นครั้งแรกเราจะสร้างตัวจับเวลาเรียกใช้รหัสหลังจากช่วงเวลาที่กำหนดและเมื่อมีการเรียกครั้งที่สองเราจะเข้าใจตัวจับเวลาก่อนหน้าและรีเซ็ตอย่างชัดเจน หากการจับเวลาก่อนหน้านี้ถูกดำเนินการแล้วการดำเนินการนี้ไม่ได้ตั้งใจ หากตัวจับเวลายังไม่ถูกดำเนินการจะถูกแทนที่ด้วยตัวจับเวลาใหม่ วัตถุประสงค์คือเพื่อดำเนินการฟังก์ชั่นหลังจากหยุดเป็นระยะเวลาหนึ่ง
วิธีการวัตถุสามารถเขียนได้ดังนี้:
var haoroomstest = {timeoutid: null, performprocessing: function () {console.log ("Resize"); }, กระบวนการ: function () {ClearTimeOut (this.timeOutId); var that = this; this.timeoutid = settimeout (function () {that.performprocessing ();}, 500)}}หลังจากนี้เราใช้:
$ (window) .resize (function () {haoomstest.process ();})
สิ่งนี้จะลดการร้องขอลดการวาดใหม่ DOM และบรรลุวัตถุประสงค์ของการควบคุมปริมาณ!
วิธีอื่น ๆ ในการควบคุมการควบคุมปริมาณ
นอกเหนือจากวิธีที่เราใช้วัตถุวิธีการอื่น ๆ และวิธีการในการควบคุมปริมาณฟังก์ชั่นยังได้รับการแนะนำทางออนไลน์และในข้อมูล ฉันจะแนะนำหลาย ๆ ด้านล่าง!
วิธีการทำงานหนึ่ง
ฟังก์ชั่นเค้น (วิธีการบริบท) {cleartimeout (method.tid); method.tid = settimeout (function () {method.call (บริบท);}, 100); -เราใช้
ฟังก์ชั่น resizediv () {console.log ("harooms")} $ (หน้าต่าง) .resize (function () {throttle (resizediv)})เอฟเฟกต์เดียวกับวัตถุข้างต้น!
วิธีการฟังก์ชันสอง
นอกจากนี้ยังมีวิธีที่ได้รับความนิยมมากขึ้นในการห้ามเงินออนไลน์ดังนั้นฉันจะเขียนเกี่ยวกับที่นี่!
ฟังก์ชั่นเค้น (วิธีการล่าช้า) {ตัวจับเวลา var = null; return function () {var context = this, args = อาร์กิวเมนต์; ClearTimeout (ตัวจับเวลา); timer = settimeout (function () {method.apply (บริบท, args);}, ล่าช้า); -จากนั้นคุณสามารถเขียนสิ่งนี้:
ฟังก์ชั่น resizediv () {console.log ("haorooms")} window.onresize = เค้น (Resizediv, 500);ความต้องการใหม่
เมื่อเราทำการค้นหาการเชื่อมโยงอัจฉริยะการค้นหาแบบฟัซซี่เราจะผูกเหตุการณ์ Keyup ในอินพุต แต่ฉันไม่ต้องการเรียกใช้บ่อยดังนั้นจะมีปัญหาในการใช้วิธีการข้างต้น ดังนั้นฟังก์ชั่นข้างต้นมีการเปลี่ยนแปลงเล็กน้อยดังนี้:
ฟังก์ชั่นเค้น (วิธีการล่าช้าระยะเวลา) {ตัวจับเวลา var = null, เริ่มต้น = วันที่ใหม่ (); ฟังก์ชั่น return () {var context = this, args = อาร์กิวเมนต์, current = new date () ;; ClearTimeout (ตัวจับเวลา); if (ปัจจุบัน begin> = ระยะเวลา) {method.apply (บริบท, args); เริ่มต้น = ปัจจุบัน; } else {timer = settimeout (function () {method.apply (บริบท, args);}, ล่าช้า); -วิธีนี้การเรียกใช้จะไม่บ่อยเหมือนก่อน!