सेटटाइमआउट और जावास्क्रिप्ट में मायावी "यह"

सेटटाइमआउट फ़ंक्शन का उपयोग करते समय, डेवलपर्स को अक्सर एक समस्या का सामना करना पड़ता है जहां तरीकों के बाद की कॉल खो जाती हैं उनका इच्छित संदर्भ, जिसके परिणामस्वरूप अपरिभाषित तरीके प्रतीत होते हैं। यह आम तौर पर "इस" संदर्भ के खो जाने के कारण होता है।

समस्या:

निम्नलिखित कोड पर विचार करें:

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];
        }
    }
};

प्रारंभिक पृष्ठ लोड पर, मेथड2 फ़ंक्शन इच्छानुसार काम करता है। हालाँकि, टाइमआउट सेट करने के बाद, मेथड2 पर आने वाली कॉल के परिणामस्वरूप एक त्रुटि आती है जो दर्शाती है कि यह अपरिभाषित है।

समाधान:

मुख्य मुद्दा सेटटाइमआउट को संभालने के तरीके में है यह कीवर्ड. setTimeout(this.method, 5000) का उपयोग करके टाइमआउट सेट करते समय, संदर्भ खो जाता है, जिसके परिणामस्वरूप त्रुटि होती है।

इस समस्या का एक चतुर समाधान बाइंड() विधि का उपयोग करना है। विधि कॉल के अंत में ".bind(this)" जोड़कर, संदर्भ को स्पष्ट रूप से बाध्य किया जा सकता है, यह सुनिश्चित करते हुए कि समय समाप्त होने के बाद भी सही "यह" संदर्भ बनाए रखा जाता है।

बेहतर कोड :

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 को समय समाप्त होने के बाद इच्छित कार्य जारी रखने की अनुमति मिलती है। यह दृष्टिकोण सही निष्पादन संदर्भ को संरक्षित करने में सुरुचिपूर्ण और प्रभावी दोनों है।