خنق
الخانق الذي نتحدث عنه هنا يعني اختناق الوظيفة. وببساطة ، فإن وحدة تحكم التردد لمكالمات الوظائف هي إجراء التحكم الفاصل الزمني بشكل مستمر. سيناريوهات التطبيق الرئيسية مثل:
1. حدث نقل الماوس
2. تحديد المواقع الديناميكية لعناصر DOM ، وتغيير حجم الأحداث وتمريرها من كائنات النوافذ
يقارن بعض الناس بوضوح الحادث المذكور أعلاه بتقديم مسدس رشاش. الخانق هو مشغل المدفع الرشاش. إذا لم تضع الزناد ، فسوف يستمر في إطلاق النار. وينطبق الشيء نفسه على الأحداث المذكورة أعلاه التي استخدمناها أثناء التطوير. إذا لم تقم بإصدار الماوس ، فسيتم دائمًا تشغيل أحداثه. على سبيل المثال:
نسخة الكود كما يلي:
var resizetimer = null ؛
$ (window) .on ('تغيير الحجم' ، الدالة () {
if (resizetimer) {
ClearTimeout (Resizetimer)
}
resizetimer = setTimeOut (function () {
console.log ("تغيير حجم النافذة") ؛
} ، 400) ؛
Debounce
Debounce يشبه إلى حد كبير الخانق. Debounce هي طريقة سيتم تنفيذها عندما يكون وقت الفراغ أكبر من أو يساوي قيمة معينة. Debounce هو التحكم الفاصل في وقت الفراغ. على سبيل المثال ، عندما نفعل الإكمال التلقائي ، نحتاج إلى التحكم في الفاصل الزمني لاستدعاء الطريقة عند إدخال النص. بشكل عام ، تبدأ حرف الإدخال الأول على الفور ، ويتم استدعاء الطريقة التي تم تنفيذه مرارًا وتكرارًا وفقًا لفاصل زمني معين. إنه مفيد بشكل خاص للمدخلات غير الطبيعية ، مثل التمسك بمؤتمر معين وعدم وضعه.
سيناريوهات التطبيق الرئيسية للاشتعال هي:
حدث keydown إدخال النص ، حدث keyup ، على سبيل المثال ، الإكمال التلقائي
هناك العديد من الطرق لهذا النوع من الإنترنت ، مثل UndersCore.js تغلف الخانق ودون Debounce. لدى JQuery أيضًا مكونًا إضافيًا لـ Throttle and Debounce: JQuery Throttle/Debounce. جميع المبادئ متشابهة ويتم تنفيذ نفس الوظائف. فيما يلي وظيفة التحكم في الخانق والنقام التي كنت أستخدمها مرة أخرى:
نسخة الكود كما يلي:
/*
* عندما تسمى وظيفة إرجاع التحكم في التردد بشكل مستمر ، يقتصر تردد تنفيذ FN على عدد المرات التي يتم فيها تنفيذها في كل مرة
* param fn {function} الوظائف التي يجب استدعاؤها
* Param Delay {number} وقت التأخير بالمللي ثانية
* param فوري {bool} تمرير خطأ إلى المعلمة الفورية يتم تنفيذ الوظيفة المرتبطة أولاً ، بدلاً من تأخيرها ثم تنفذها.
* regurn {function} استدعاء الوظيفة بالفعل
*/
var thinttle = function (fn ، delay ، forr ، debounce) {
var Curr = +New Date () ، // الحدث الحالي
last_call = 0 ،
last_exec = 0 ،
TIMER = NULL ،
فرق ، // فرق الوقت
السياق ، // السياق
args ،
exec = function () {
last_exec = curr ؛
fn.apply (السياق ، args) ؛
} ؛
وظيفة الإرجاع () {
Curr = +New Date () ؛
السياق = هذا ،
args = الحجج ،
diff = curr - (debounce؟ last_call: last_exec) - تأخير ؛
ClearTimeout (مؤقت) ؛
إذا (debonce) {
إذا (فوري) {
Timer = setTimeOut (exec ، Delay) ؛
} آخر إذا (diff> = 0) {
exec () ؛
}
} آخر {
if (diff> = 0) {
exec () ؛
} آخر إذا (فوري) {
Timer = setTimeOut (exec ، -diff) ؛
}
}
last_call = curr ؛
}
} ؛
/*
* عندما يتم استدعاء وظيفة إرجاع التحكم في الخمول بشكل مستمر ، يجب أن يكون وقت الخمول أكبر من أو يساوي التأخير قبل تنفيذ FN.
* param fn {function} الوظيفة المراد استدعاؤها
* param Delay {number} وقت الفراغ
* param فوري {bool} تمرير خطأ إلى المعلمة الفورية يتم تنفيذ الوظيفة المرتبطة أولاً ، بدلاً من تأخيرها ثم تنفذها.
* regurn {function} استدعاء الوظيفة بالفعل
*/
var debounce = function (fn ، delay ، forress) {
عودة الخانق (FN ، التأخير ، فوري ، حقيقي) ؛