استخدام setTimeout والحفاظ على السياق مع هذا في JavaScript

عند استخدام وظيفة setTimeout في JavaScript، من الضروري أن تكون على دراية بكيفية التعامل معها سياق هذا. يصبح هذا ذا صلة بشكل خاص عند استدعاء الأساليب المحددة في سياق مختلف ضمن رد اتصال المهلة.

في مقتطف التعليمات البرمجية المقدم، تستدعي وظيفة الطريقة الطريقة 2، التي تسترد عنصر صورة بناءً على معرف تم تمريره وتعيين خاصية src الخاصة به. . في البداية، يتم تنفيذ الطريقة 2 بنجاح. ومع ذلك، بعد تأخير setTimeout، يحدث خطأ لأن وظيفة الطريقة 2 لم تعد محددة ضمن السياق المقصود.

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

الحل:[] &&&]

للحفاظ على السياق المقصود لهذا ضمن رد اتصال المهلة، يمكنك استخدام الأسلوب .bind() لتعيين ربط السياق بشكل صريح. من خلال إلحاق .bind(this) بنهاية الوظيفة التي يتم تمريرها إلى setTimeout، يمكنك التأكد من أن هذا ضمن وظيفة رد الاتصال يشير إلى السياق المقصود.

في مقتطف التعليمات البرمجية المحدث:

test.prototype.method = الدالة () { // الأسلوب 2 يُرجع الصورة بناءً على المعرف الذي تم تمريره this.method2('useSomeElement').src = "http://www.some.url"; timeDelay = window.setTimeout(this.method.bind(this), 5000); // ^^^^^^^^^^^ test.prototype.method = function() { //method2 returns image based on the id passed this.method2('useSomeElement').src = "http://www.some.url"; timeDelay = window.setTimeout(this.method.bind(this), 5000); // ^^^^^^^^^^^ <- fix context };بإضافة .bind(this)، سيتم ربط الكلمة الأساسية this داخل وظيفة رد الاتصال بنموذج الاختبار الأولي، مما يتيح استدعاء الطريقة 2 بشكل صحيح في سياق طريقة النموذج الأولي حتى بعد تأخير setTimeout.