JavaScript-এ টাইমার এবং প্রসঙ্গ হারানো

ইভেন্ট হ্যান্ডলারে টাইমার ব্যবহার করার সময়, প্রসঙ্গ হারানোর সমস্যা আমাদের অপেক্ষা করে। আসুন একটি উদাহরণ দেখি।

ধরুন আমাদের একটি ইনপুট ক্ষেত্র আছে:

html<input id="elem" value="text">

ধরুন এই ইনপুটটিতে ক্লিক করলে একটি বেনামী ফাংশন চালু হয় এবং সেই ফাংশনের ভিতরে একটি টাইমার চালু হয়, যা প্রতি সেকেন্ডে কনসোলে কিছু আউটপুট দেয়:

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  setInterval(function() {
    console.log('!!!'); // কনসোলে কিছু আউটপুট করুন
  }, 1000);
});

এখন পর্যন্ত সব সঠিকভাবে কাজ করছে। কিন্তু এখন ধরুন আমরা কনসোলে ইনপুটের value আউটপুট করতে চাই - আমাদের জন্য একটি অবাক করা বিষয় অপেক্ষা করছে: কনসোলে undefined আউটপুট হবে:

javascriptelem.addEventListener('click', function() {
  setInterval(function() {
    console.log(this.value); // undefined আউটপুট হবে
  }, 1000);
});

সমস্যাটি হল যে আমাদের কাছে একটি ফাংশনের ভিতরে আরেকটি ফাংশন রয়েছে: একটি বাহ্যিক বেনামী ফাংশন আছে, যা ক্লিক করলে কল হয় এবং একটি অভ্যন্তরীণ বেনামী ফাংশন আছে, যা টাইমার দ্বারা চালু হয়। বাহ্যিক ফাংশনে this ইনপুটটিকে নির্দেশ করে, কিন্তু অভ্যন্তরীণ ফাংশনে - তা করে না। এখানে প্রসঙ্গ হারানোর ঘটনা ঘটেছে।

কেন undefined আউটপুট হয়, এবং কনসোলে একটি ত্রুটি দেখা যায় না, যেমন আগের পাঠগুলোতে হয়েছিল? কারণ setInterval এর মাধ্যমে কল হওয়া ফাংশনের ভিতরে this window কে নির্দেশ করে।

এর মানে হল যে আমরা window অবজেক্ট থেকে value প্রপার্টি পড়ার চেষ্টা করছি, এভাবে: window.value, এবং এতে এমন কোন প্রপার্টি নেই, তাই আমরা undefined পাই (ত্রুটি নয়)।

self প্রবর্তন করে সমস্যাটি সংশোধন করা যাক:

javascriptelem.addEventListener('click', function() {
  let self = this;
  
  setInterval(function() {
    console.log(self.value);
  }, 1000);
});

html<input type="button" id="elem" value="1">

javascriptlet elem = document.querySelector('#elem');

elem.addEventListener('click', function() {
  setInterval(function() {
    this.value = Number(elem.value) + 1;
  }, 1000);
});