تصف هذه المقالة مفهوم واستخدام خنق وظيفة JavaScript. شاركه للرجوع إليه ، على النحو التالي:
في الآونة الأخيرة ، عندما كنت أقوم بإنشاء صفحات ويب ، كان لدي شرط ، وهو ما كان تغيير أحجام العناصر في صفحات عندما تغيرت نافذة المتصفح ، لذلك فكرت بشكل طبيعي في حدث تغيير الحجم في النافذة ، لذلك كتبت هذا
<! doctype html> <html> <head> <title> Throttle </title> </head> <body> <script type = "text/javaScript"> n = 0 ؛ وظيفة ResizeHandler () {console.log (تاريخ جديد (). getTime ()) ؛ console.log (++ n) ؛ } window.onresize = ResizeHandler ؛ </script> </body> </html>يتم تنفيذ الوظيفة ، لكن عندما أسحب وأسقط الطريقة التي أقوم بتغيير حجم نافذة المتصفح ، نظرت إلى وحدة التحكم
هذا صحيح ، فإن السحب والإفلات البسيطين جعل طريقة تغيير حجمها () تنفيذ 52 مرة ، وهو ليس التأثير الذي أريده على الإطلاق. في الواقع ، فإن رمز طريقة تغيير الحجم الخاص بي () معقدة للغاية ، حتى أنني أستخدم AJAX لإرسال طلبات إلى الخادم. إذا قمت ببساطة بتغيير حجم النافذة في وقت واحد ، فيجب علي الاتصال بـ 52 مرة. هذه صفقة كبيرة.
وظيفة الاختناق
في الواقع ، نيتي الأصلية هي إجراء بعض التعديلات على الصفحة بعد تغيير حجم النافذة. لا يتم تشغيل حدث تغيير حجم النافذة بعد انتهاء الحجم. لا أعرف التردد المحدد ، لكنه يتصل باستمرار حتى لا يتغير حجم النافذة. في الواقع ، يتم تشغيل آليات مماثلة وموسوفوف مرارا وتكرارا في فترة زمنية قصيرة.
هناك وظائف تخنق تتعامل بشكل خاص مع هذه المشكلة في البرمجة المتقدمة JavaScript
دالة TRITTLE (الطريقة ، السياق) {clearTimeOut (method.tid) ؛ method.tid = setTimeOut (function () {method.call (context) ؛} ، 500) ؛}المبدأ بسيط للغاية. استخدم مؤقتًا لتأخير تنفيذ الوظيفة بمقدار 500 ميلي ثانية. إذا تم استدعاء وظيفة مرة أخرى خلال 500 ميلي ثانية ، فسيتم حذف المكالمة الأخيرة. هذه المرة سيتم تنفيذ المكالمة بعد 500 ميلي ثانية ، وسيتم تكرار ذلك. وبهذه الطريقة ، يمكن تغيير الكود الخاص بي الآن إلى
<script type = "text/javaScript"> n = 0 ؛ function resizehandler () {console.log (new date (). getTime ()) ؛ console.log (++ n) ؛} دالة Throttle (الطريقة ، السياق) {clearTimeOut (method.tid) ؛ method.tid = setTimeOut (function () {method.call (context) ؛} ، 500) ؛} window.onresize = function () {thinttle (تغيير حجمه ، نافذة) ؛} ؛ </script>حاول السحب والسحب ، تم تنفيذه مرة واحدة فقط
طريقة أخرى للقيام بذلك
هناك أيضًا حل لخنق الوظيفة عبر الإنترنت ، وهو ما يفعل هذا
دالة الخنق (الطريقة ، التأخير) {var timer = null ؛ function function () {var context = this ، args = mations ؛ ClearTimeout (مؤقت) ؛ timer = setTimeOut (function () {method.apply (context ، args) ؛} ، delay) ؛ }}حاول أن تسميها ، نفس التأثير
<script type = "text/javaScript"> n = 0 ؛ function resizehandler () {console.log (new date (). getTime ()) ؛ console.log (++ n) ؛} دالة الخنق (الطريقة ، التأخير) {var timer = null ؛ function function () {var context = this ، args = mations ؛ ClearTimeout (مؤقت) ؛ timer = setTimeOut (function () {method.apply (context ، args) ؛} ، delay) ؛ }} window.onresize = throuttle (تغيير حجمه ، 500) ؛ // لأنه يتم إرجاع مقبض الوظيفة ، ليست هناك حاجة للف الوظيفة </script>يقارن
كلتا الطريقتين تستخدم setTimeout. الفرق هو أن الوظيفة التي تمت إضافتها بواسطة الطريقة الثانية تؤخر وقت التنفيذ. من السهل الحصول على هذه الوظيفة في الحل الأول ، وإضافة معلمة.
لكن الخيار الأول يضبط TID كمتغير للدالة التي يتم حفظها ، بينما يخلق الخيار الثاني إغلاقًا للتخزين. أنا شخصياً أعتقد أن الفجوة ليست كبيرة ، وأنا أحب أول واحد ، وهو بسيط وفعال.
طلب جديد
في يوم من الأيام ، صنعت شيئًا مشابهًا ، تمامًا مثل المطالبة التلقائية للدخول على صفحة Baidu الرئيسية. لقد ربطت حدث keyup على النص. يطالب تلقائيًا في كل مرة تظهر لوحة المفاتيح ، لكنني لا أريد المطالبة بها كثيرًا. لذلك استخدمت الطريقة أعلاه ، لكنها كانت مأساوية. لقد توقفت فقط عن الإدخال وانتظرت 500 ميلي ثانية للمطالبة ، ولم يكن هناك موجه على الإطلاق أثناء عملية الإدخال. نظرت إلى الكود ووجدت أنه لم يكن صحيحًا. طالما أن المستخدم سوف يكتب بشكل أعمى ، اضغط على لوحة المفاتيح في حدود 500 مللي ثانية ، سيتم تأخير الوظيفة المطالبة بشكل مستمر. هذا من شأنه أن يطالب فقط عندما توقفت ، والتي ستكون بلا معنى.
هل يمكن تنفيذها مرة واحدة في وقت ثابت بناءً على خنق الوظيفة؟
تغييرات صغيرة
لقد بحثت عبر الإنترنت ويمكننا إجراء بعض التغييرات بناءً على طريقة الكتابة الثانية (الأول سيء بعض الشيء لتوسيع متغيرات متعددة للوظائف) ، وإضافة معلمة حيث يجب تنفيذ الفاصل الزمني الثابت.
دالة الخنق (الطريقة ، التأخير ، المدة) {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) ؛ }}}بهذه الطريقة ، سنحدد المدة التي تستغرقها الفاصل الزمني. إذا تم تجاوز وقت الإعداد ، فسوف نقوم بتنفيذه على الفور. استخدم المثال الآن لتجربة التأثير
window.onresize = خنق (تغيير حجمه ، 100200) ؛
صحيح أنه لا يوجد تنفيذ متكرر أو تنفيذ نهائي
لمزيد من المعلومات حول المحتوى المتعلق بـ javaScript ، يرجى مراجعة موضوعات هذا الموقع: "ملخص لتأثيرات وتقنيات تبديل JavaScript" ، "ملخص لمهارات خوارزمية بحث JavaScript" ، "ملخص لتأثيرات الرسوم المتحركة JavaScript و Techniques و" ملخص ". خوارزميات وتقنيات JavaScript Traversal "، و" ملخص استخدام العمليات الرياضية JavaScript "
آمل أن تكون هذه المقالة مفيدة لبرمجة JavaScript للجميع.