setTimeout و"this" بعيد المنال في JavaScript

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

المشكلة:

خذ بعين الاعتبار الكود التالي:

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, 5000);
};

test.prototype.method2 = function(name) {
    for (var i = 0; i  1) {
            return document.images[i];
        }
    }
};

عند التحميل الأولي للصفحة، تعمل وظيفةmethod2 على النحو المنشود. ومع ذلك، بعد تعيين المهلة، تؤدي الاستدعاءات اللاحقة للأسلوب 2 إلى حدوث خطأ يشير إلى أنه غير محدد.

الحل:

تكمن المشكلة الأساسية في الطريقة التي يتعامل بها setTimeout. هذه الكلمة الأساسية. عند تعيين مهلة باستخدام setTimeout(this.method, 5000)، يتم فقدان السياق، مما يؤدي إلى الخطأ.

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

كود محسّن :

test.prototype.method = function() { // الأسلوب 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 };مع هذا التعديل، يتم ربط سياق "هذا" بشكل صحيح، مما يسمح للطريقة 2 بمواصلة العمل على النحو المنشود بعد انتهاء المهلة. هذا الأسلوب أنيق وفعال في الحفاظ على سياق التنفيذ الصحيح.