تتمثل الوظيفة الأساسية لـ JavaScript في صفحات الويب في الاستماع أو الاستجابة لإجراءات المستخدم ، وهو أمر مفيد للغاية. تصرفات بعض المستخدمين متكررة للغاية ، في حين أن البعض الآخر نادر للغاية. يتم تنفيذ بعض وظائف المستمع مثل البرق ، في حين أن بعضها ثقيل لسحب المتصفح حتى الموت. خذ حدث تغيير حجم نافذة المتصفح على سبيل المثال. سيتم تشغيل هذا الحدث مرة واحدة في كل تغيير في حجم نافذة المتصفح. إذا كان المستمع كبيرًا ، فسيتم سحب متصفحك قريبًا.
من الواضح أنه لا يمكننا السماح للمستعرض بالانخفاض ، لكن لا يمكننا حذف المستمع. ومع ذلك ، يمكننا الحد من تواتر مكالمات الوظائف وإضعاف تأثير تشغيل وظيفة الحدث. بالمقارنة مع ترك تغيير حجم النافذة يؤدي إلى وظيفة المستمع مرة واحدة ، يمكننا الآن الاستماع إلى الحد الأدنى من الفاصل الزمني للتشغيل في الوظيفة التي يجب أن تكون أكبر من عدد المللي ثانية ، بحيث تحافظ على قناة مكالمات معقولة وتضمن أن تجربة المستخدم لا تدمر. هناك مكتبة جيدة لأدوات JS تسمى UndersCore.js ، والتي لديها طريقة بسيطة تتيح لك إنشاء مستمعين بسهولة يقللون من تواتر وظائف الأحداث التي تؤدي إلى.
رمز JavaScript
رمز مستمع Downswitch بسيط:
نسخة الكود كما يلي:
// إنشاء مستمع
var updatelayout = _.debounce (function (e) {
// هل يتم تحديث كل تخطيط هنا
} ، 500) ؛ // قم بالتشغيل مرة واحدة كل 500 مللي ثانية على الأقل
// أضف مستمع الحدث
Window.AdDeventListener ("تغيير الحجم" ، updatelayout ، false) ؛
... تستخدم الطبقة الأساسية لهذا الرمز السفلي.
// إرجاع وظيفة ، طالما استمرت في التذرع
// أن يكون التشغيل. سيتم استدعاء الوظيفة بعد توقفها
// n milliseconds. إذا تم تمرير "فوري" ، قم بإطلاق الوظيفة على
// LEDAD EDGE ، بدلا من الخلاف.
_.debounce = function (func ، انتظر ، فوري) {
var timeout
وظيفة الإرجاع () {
var context = هذا ، args = الوسيطات ؛
var later = function () {
مهلة = فارغة ؛
إذا (! فور) funC.Apply (السياق ، args) ؛
} ؛
var callnow = forriatiate &&! timeout ؛
ClearTimeout (مهلة) ؛
timeout = setTimeout (لاحقًا ، انتظر) ؛
إذا (callnow) func.apply (السياق ، args) ؛
} ؛
} ؛
الكود ليس معقدًا بشكل خاص ، لكنه أيضًا نوع من السعادة لعدم الاضطرار إلى كتابته بنفسك. لا تعتمد وظيفة Debounce هذه على وظائف Underscore.js الأخرى ، بحيث يمكنك إضافة هذه الطريقة إلى مكتبة أدوات JS المفضلة لديك ، مثل jQuery أو Mootools ، وهو أمر سهل:
نسخة الكود كما يلي:
// موتوول
function.implement ({
Debounce: وظيفة (انتظر ، فورية) {
var timeout ،
func = هذا ؛
وظيفة الإرجاع () {
var context = هذا ، args = الوسيطات ؛
var later = function () {
مهلة = فارغة ؛
إذا (! فور) funC.Apply (السياق ، args) ؛
} ؛
var callnow = forriatiate &&! timeout ؛
ClearTimeout (مهلة) ؛
timeout = setTimeout (لاحقًا ، انتظر) ؛
إذا (callnow) func.apply (السياق ، args) ؛
} ؛
}
}) ؛
// استخدمه!
window.addevent ("تغيير الحجم" ، myfn.debounce (500)) ؛
كما ذكر أعلاه ، فإن حدث تغيير حجم النافذة هو المكان الأكثر شيوعًا لاستخدام التردد لأسفل. مكان شائع آخر هو أنه يتم إعطاء موجه إكمال تلقائي بناءً على إدخال مفتاح المستخدم. أحب حقًا جمع مقتطفات الرمز هذه ، والتي يمكن أن تجعل موقع الويب الخاص بك أكثر كفاءة بسهولة. في الوقت نفسه ، أوصي أيضًا بدراسة UndersCore.js ، والتي توفر عددًا كبيرًا من الوظائف المفيدة للغاية.