بعض الحسابات والمعالجة في المتصفح هي أغلى بكثير من غيرها. على سبيل المثال ، تتطلب عمليات DOM المزيد من الذاكرة ووقت وحدة المعالجة المركزية من التفاعلات غير DOM. إن محاولة القيام بالكثير من العمليات المتعلقة بـ DOM على التوالي قد تتسبب في تعليق المتصفح وأحيانًا يتعطل. من السهل أن يحدث هذا خاصة عند استخدام معالج الأحداث في IE. عندما يتم تغيير حجم المتصفح ، يتم تشغيل الحدث بشكل مستمر. إذا حاولت إجراء عمليات DOM داخل معالج الأحداث على onResize ، فقد تعطل التغييرات عالية التردد في المتصفح.
الفكرة الأساسية وراء اختناق الوظيفة هي أنه لا يمكن تنفيذ رمز معين بشكل متكرر دون انقطاع. في المرة الأولى التي يتم فيها استدعاء الوظيفة ، يتم إنشاء مؤقت ، ويتم تشغيل الكود بعد الفاصل الزمني المحدد. عندما تسمى الوظيفة الموقت الثاني ، فإنه يمسح المؤقت السابق ويضع واحد آخر. إذا تم تنفيذ الموقت السابق ، فإن هذه العملية ليس لها معنى. ومع ذلك ، إذا لم يتم تنفيذ المؤقت السابق ، فسيتم استبداله بالفعل بجهاز توقيت جديد. والغرض من ذلك هو التنفيذ فقط بعد إيقاف طلب تنفيذ الوظيفة لفترة من الوقت.
دالة TRITTLE (الطريقة ، السياق) {clearTimeOut (method.tid) ؛ method.tid = setTimeOut (function () {method.call (context) ؛} ، 100) ؛ }مثال على التطبيق:
على افتراض أن هناك عنصر <div/> يحتاج إلى الحفاظ على ارتفاعه مساوياً لعرضه دائمًا ، يمكن ترميزه على النحو التالي:
وظيفة RESIDEIV () {var div = document.getElementById ("myDiv") ؛ div.style.height = div.offsetWidth + "px" ؛ } window.onresize = function () {throttle (resizediv) ؛ }هنا ، يتم وضع وظيفة تغيير الحجم في وظيفة منفصلة تسمى Resizediv ، ومكالمات معالج الأحداث onresize تخصيص Throttle () وتمر في وظيفة Resizediv بدلاً من الاتصال مباشرة Resizediv (). في معظم الحالات ، لا يمكن للمستخدمين أن يشعروا بالتغيير ، على الرغم من أن الحسابات المحفوظة على المتصفح قد تكون كبيرة جدًا.
فيما يلي الإضافات من مستخدمي الإنترنت الآخرين
اليوم ، نكتب بشكل أساسي عن وظيفة اختناقنا التي نحتاجها في عملنا اليومي. قد لا يكون بعض الأصدقاء على دراية بخنق الوظيفة. في الواقع ، في العمل ، تتطلب منا العديد من السيناريوهات اختناق: //www.sub.com. الأكثر شيوعا هي تغيير حجم الشاشة ، وأحداث اللمس أو التمرير. لا أعرف ما إذا كنت قد قرأت المقالات التي كتبت من قبل! يحدد jQuery الاتجاه المنزلق لكرة Scrollbar و 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.timeoutid = setTimeOut (function () {that.performprocessing () ؛} ، 500)}}بعد هذا ، نستخدم:
$ (window) .resize (function () {haoomstest.process () ؛})
سيؤدي ذلك إلى تقليل الطلبات ، ويقلل من إعادة رسم DOM ، وتحقيق الغرض من الاختناق!
طرق أخرى لخنق الوظيفة
بالإضافة إلى الطريقة التي نستخدم بها الكائنات ، يتم أيضًا تقديم أساليب وطرق أخرى من اختناق الوظيفة عبر الإنترنت وفي المعلومات. سأقدم بإيجاز عدة أدناه!
طريقة الوظيفة الأولى
دالة TRITTLE (الطريقة ، السياق) {clearTimeOut (method.tid) ؛ method.tid = setTimeOut (function () {method.call (context) ؛} ، 100) ؛ }نحن نستخدم
وظيفة RESIDEIV () {console.log ("harooms")} $ (window) .resize (function () {throuttle (resizediv)})نفس تأثير الكائن أعلاه!
طريقة الوظيفة الثانية
هناك أيضًا طريقة أكثر شعبية لحظر المال عبر الإنترنت ، لذلك سأكتب عنها هنا!
دالة الخنق (الطريقة ، التأخير) {var timer = null ؛ function function () {var context = this ، args = mations ؛ ClearTimeout (مؤقت) ؛ timer = setTimeOut (function () {method.apply (context ، args) ؛} ، delay) ؛ }}ثم يمكنك كتابة هذا:
وظيفة RESIDEIV () {console.log ("haorooms")} window.onresize = thanttle (resizediv ، 500) ؛طلب جديد
عندما نقوم بمطالبات جمعية ذكية بحث غامضة ، سنقوم بربط حدث keyup في المدخلات. لكنني لا أريد تشغيله كثيرًا ، لذلك ستكون هناك مشاكل في استخدام الطريقة أعلاه. لذلك ، يتم تغيير الوظيفة أعلاه قليلاً ، على النحو التالي:
دالة الخنق (الطريقة ، التأخير ، المدة) {var timer = null ، start = new date () ؛ Return function () {var context = this ، args = alcessions ، current = new date () ؛؛ ClearTimeout (مؤقت) ؛ if (current-begin> = المدة) {method.apply (context ، args) ؛ ابدأ = الحالي ؛ } آخر {timer = setTimeOut (function () {method.apply (context ، args) ؛} ، Delay) ؛ }}}بهذه الطريقة لن يكون التشغيل متكررًا كما كان من قبل!