জাভাস্ক্রিপ্টে টাইমার শুরু করতে বাটনে একাধিক ক্লিক

আমি উপরে যে কোডটি দিয়েছি, সেটি আসলে একটি সমস্যা রয়েছে। এই সমস্যাটি প্রকাশ পায় যখন আমাদের বাটনে একাধিক ক্লিক করা হয়। এই ক্ষেত্রে প্রতিটি ক্লিক একটি নতুন টাইমার শুরু করবে।

অর্থাৎ, উদাহরণস্বরূপ, বাটনে তিনবার ক্লিক করলে তিনটি টাইমার শুরু হবে, এবং এই টাইমারগুলির প্রতিটি কনসোলে কাউন্টারের মান আউটপুট করবে। এর মানে দাঁড়ায় যে মানগুলি তিনগুণ দ্রুত পরিবর্তিত হবে!

বর্ণিত সমস্যার সমাধান করার জন্য সহজভাবে এটি করতে হবে যাতে বাটনে পুনরায় ক্লিক করলে নতুন টাইমার শুরু না হয়। উদাহরণস্বরূপ, টাইমার শুরু হওয়ার পরে বাটন থেকে বাইন্ড করা ক্লিক হ্যান্ডলারটি আনবাইন্ড করা যেতে পারে:

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

start.addEventListener('click', function func() {
  let i = 0;
  
  setInterval(function() {
    console.log(++i);
  }, 1000);
  
  this.removeEventListener('click', func); // হ্যান্ডলার আনবাইন্ড করছি
});