تنفيذ غير متزامن أسرع (SetTimeOut متصفحات متعددة)

إذا أردنا تنفيذ وظيفة بشكل غير متزامن ، فإن الطريقة الأولى التي نفكر فيها ستكون بالتأكيد setTimeOut

على سبيل المثال: setTimeOut (الدالة (/* افعل شيئًا بعد 1S*/) {} ، 1000}

فماذا لو كنت تريد تنفيذ وظيفة بشكل غير متزامن الأسرع؟

هل سيكون:

 setTimeOut (الدالة ( /* افعل شيئًا في أقرب وقت ممكن* /) {} ، 0}

لسوء الحظ ، من أجل تجنب إمكانية التشويش على مؤشر ترابط واجهة المستخدم في عش SetTimeout ، يحدد المتصفح الفاصل الزمني لوقت التنفيذ الدنيا لـ SetTimeOut ، والفاصل الزمني للتنفيذ الأدنى لمتصفحات مختلفة مختلفة. الفاصل الزمني للتنفيذ الفعلي لـ SetTimeout 0 في Chrome حوالي 12 مللي ثانية.

لذا ، إذا كنت ترغب في تنفيذ وظيفة بشكل غير متزامن بشكل غير متزامن قدر الإمكان ، فهل هناك أي طريقة لتسريعها؟

دعونا نلقي نظرة على جانب المتصفح ، ما هي طرق التنفيذ غير المتزامنة شائعة الاستخدام

SetImmediate: تنفذ هذه الطريقة التنفيذ غير المتزامن بشكل أسرع من SetTimeout 0 ، مع وقت تنفيذ أقرب إلى 0 مللي ثانية ، ولكن فقط IE/Node يدعمه.

requestAnimationFrame: غالبًا ما يتم استخدام هذه الطريقة عند القيام بحلقات الرسوم المتحركة. لن يتم تنفيذ هذه الطريقة إلا عندما يقوم المتصفح بتحديث واجهة المستخدم. الحد الأقصى لتواتر تحديث واجهة المستخدم هو عمومًا 60 إطارًا في الثانية ، لذلك يكون طلب requestAnimationFrame أبطأ بشكل عام من SetTimeout 0.

بالإضافة إلى استخدام الوظائف غير المتزامنة ، هناك بعض الطرق التي يمكنها تنفيذ المكالمات غير المتزامنة.

استخدم onMessage:

عند التواصل مع IFRAMES ، يتم استخدام طريقة onMessage غالبًا ، ولكن ماذا يحدث إذا تم إعطاء نفس النافذة بعد النافذة لنفسها؟ في الواقع ، إنها تعادل تنفيذ وظيفة بشكل غير متزامن

على سبيل المثال:

 var dosth = function () {} window.addeventListener ("message" ، dosth ، true) ؛ window.postmessage ("،"*") ؛

بالإضافة إلى ذلك ، يمكنك أيضًا استخدام علامات البرنامج النصي لتنفيذ التنفيذ غير المتزامن للوظائف ، مثل:

 var newscript = document.createElement ("script") ؛ newscript.onreadyStateChange = dosth ؛ document.documentElement.appendChild (Newscript) ؛

ستنفيذ إضافة البرنامج النصي إلى المستند أيضًا على onReadyStateChange ، ولكن لا يمكن استخدام هذه الطريقة إلا في المتصفحات بموجب IE.

إذن من هو الأسرع مع هذه الأساليب؟

اختبرها ،

تحت الكروم:

setImmediate: غير متوفر.

setTimeout 0: 12ms

onMessage: 6 مللي ثانية

onReadyStateChange: غير مدعوم

تحت Chrome ، OnMessage أسرع من settimeout 0.

Firefox:

setImmediate: غير متوفر.

setTimeout 0: 7ms

onMessage: 7 مللي ثانية

onReadyStateChange: غير مدعوم

تحت Firefox ، onMessage و Settimeout 0 هي بنفس السرعة.

IE9:

setImmediate: غير متوفر.

setTimeout 0: 11ms

onMessage: 7 مللي ثانية

onReadyStateChange: 2ms

في IE9 ، يكون الوقت onReadyStateChange أسرع بكثير من الاثنين الآخرين.

بشكل عام ، setImmediate <readyStateChange <onMessage <setTimeOut 0 <requestAnimationFrame

لذلك ، يمكننا ببساطة تغليف طريقة لتنفيذ الوظيفة غير المتزامنة بسرعة:

 var setzerotimeout = (function () {if (window.setImmediate) {// ie10+ الإصدار ، استخدم setImMediAtereturn window.setImmediate ؛} آخر if ("onReadyStateChange" في المستند. الدالة () {/* الإصدار باستخدام onMessage*/}} آخر {return window.settimeout ؛}}) () ؛