JavaScript Timers কী? setTimeout & setInterval সহজ গাইড

JavaScript Timers ব্যবহার করে নির্দিষ্ট সময় পরে কোনো function চালানো অথবা নির্দিষ্ট সময় পরপর কোনো function বারবার চালানো যায়। JavaScript-এ timer তৈরি করার জন্য সবচেয়ে বেশি ব্যবহৃত functions হলো setTimeout() এবং setInterval()।

Timer-এর মাধ্যমে delayed execution, countdown, digital clock, slideshow, automatic updates এবং বিভিন্ন asynchronous task তৈরি করা যায়।

JavaScript Timers কী?

JavaScript Timer হলো এমন একটি mechanism যা কোনো function-কে সঙ্গে সঙ্গে execute না করে নির্দিষ্ট সময় পরে অথবা নির্দিষ্ট interval অনুযায়ী execute করার জন্য schedule করে।

JavaScript-এ প্রধান timer functions হলো:

setTimeout() — নির্দিষ্ট delay-এর পরে একবার function চালায়।
setInterval() — নির্দিষ্ট interval পরপর function চালায়।
clearTimeout() — setTimeout() দিয়ে তৈরি timer cancel করে।
clearInterval() — setInterval() দিয়ে তৈরি interval বন্ধ করে।

JavaScript Timer Functions

setTimeout()       // Run once after a delay
setInterval()      // Run repeatedly
clearTimeout()     // Cancel a timeout
clearInterval()    // Stop an interval

The setTimeout() Function

setTimeout() একটি function-কে নির্দিষ্ট সময় পরে একবার execute করার জন্য ব্যবহার করা হয়।

Syntax

setTimeout(function, milliseconds);

এখানে প্রথম argument হলো যে function-টি পরে execute হবে এবং দ্বিতীয় argument হলো delay time, যা milliseconds-এ দেওয়া হয়।

1000 milliseconds = 1 second

Example

নিচের example-এ 3 seconds পরে Hello! console-এ দেখাবে।

setTimeout(myFunction, 3000);

function myFunction() {
  console.log("Hello!");
}

এখানে 3000 milliseconds অর্থাৎ 3 seconds।

Understanding Callback Function

যখন একটি function-এর নাম অন্য কোনো function-এর argument হিসেবে পাঠানো হয়, তখন সেই function-কে callback function বলা হয়।

function myFunction() {
  console.log("Hello!");
}

setTimeout(myFunction, 3000);

এখানে myFunction হলো callback function। এটি সঙ্গে সঙ্গে execute হবে না; 3 seconds পরে execute করার জন্য schedule হবে।

Passing a Function to setTimeout()

setTimeout()-এর মধ্যে function pass করার সময় সাধারণত শুধু function-এর নাম দিতে হয়।

Correct

setTimeout(myFunction, 3000);

Incorrect

setTimeout(myFunction(), 3000);

দ্বিতীয় example-এ myFunction() লেখার কারণে function-টি সঙ্গে সঙ্গে call হয়ে যাবে। তার return value setTimeout()-এর কাছে চলে যাবে।

তাই callback হিসেবে function pass করার সময় () না দেওয়াই সঠিক পদ্ধতি।

Using an Anonymous Function

চাইলে function-এর নাম না দিয়েও সরাসরি একটি anonymous function setTimeout()-এর মধ্যে ব্যবহার করা যায়।

setTimeout(function() {
  console.log("Hello!");
}, 3000);

এই code-এ 3 seconds পরে anonymous function execute হবে।

Timers Do Not Pause JavaScript

setTimeout() JavaScript-এর execution পুরোপুরি pause করে না। Timer schedule করার পর JavaScript পরের statement-এ চলে যায়।

console.log("Start");

setTimeout(function() {
  console.log("Timer");
}, 3000);

console.log("End");

Output হবে:

Start
End
Timer

কারণ setTimeout() callback-টিকে পরে execute করার জন্য schedule করে। এটি current JavaScript code বন্ধ করে অপেক্ষা করে না।

A Zero Millisecond Delay

setTimeout(..., 0) মানে callback সঙ্গে সঙ্গে execute হবে এমন নয়। Current JavaScript task শেষ হওয়ার পরে callback execute হওয়ার সুযোগ পাবে।

console.log("Start");

setTimeout(function() {
  console.log("Timer");
}, 0);

console.log("End");

Output:

Start
End
Timer

তাই 0 milliseconds হলেও callback current code-এর আগে execute হয় না।

The Delay Is a Minimum

setTimeout()-এর দেওয়া delay হলো callback execute করার minimum waiting time। এটি exact execution time guarantee করে না।

setTimeout(function() {
  console.log("Timer finished");
}, 1000);

let i = 4e9;

while (--i > 0) {
}

এখানে timer-এর delay 1 second হলেও JavaScript যদি অন্য কোনো long-running code নিয়ে ব্যস্ত থাকে, তাহলে callback 1 second-এর পরে আরও দেরিতে execute হতে পারে।

Canceling a Timeout

setTimeout() একটি timer identifier return করে। সেই identifier সংরক্ষণ করে পরে clearTimeout()-এর মাধ্যমে timer cancel করা যায়।

Syntax

clearTimeout(timerId);

Example

let timer = setTimeout(function() {
  console.log("Finished");
}, 5000);

clearTimeout(timer);

এখানে 5 seconds-এর timer তৈরি হলেও clearTimeout() সেটিকে cancel করে দিয়েছে।

Start and Stop a Timeout

<button onclick="startTimer()">Start Timer</button>
<button onclick="stopTimer()">Stop Timer</button>

<p id="demo"></p>

<script>
let timer;

function startTimer() {
  timer = setTimeout(function() {
    document.getElementById("demo").innerHTML = "Finished";
  }, 5000);
}

function stopTimer() {
  clearTimeout(timer);
  document.getElementById("demo").innerHTML = "Timer stopped";
}
</script>

Start button চাপলে 5 seconds-এর timer শুরু হবে। Stop button চাপলে timer শেষ হওয়ার আগেই সেটি cancel হয়ে যাবে।

The setInterval() Function

setInterval() একটি callback function-কে নির্দিষ্ট interval অনুযায়ী বারবার execute করে।

Syntax

setInterval(function, milliseconds);

setTimeout() যেখানে একবার function চালায়, setInterval() সেখানে বারবার function চালায়।

Example

setInterval(function() {
  console.log("Hello");
}, 1000);

এই code প্রতি 1 second পরপর Hello console-এ দেখাবে।

Displaying Current Time Every Second

setInterval(showTime, 1000);

function showTime() {
  const date = new Date();

  console.log(date.toLocaleTimeString());
}

এই example প্রতি 1 second পরপর current time console-এ display করবে।

Canceling an Interval

setInterval() একটি interval identifier return করে। সেই identifier ব্যবহার করে clearInterval() দিয়ে interval বন্ধ করা যায়।

Syntax

clearInterval(intervalId);

Example

let timer = setInterval(function() {
  console.log("Running...");
}, 1000);

clearInterval(timer);

clearInterval() call করার পরে repeating timer বন্ধ হয়ে যাবে।

Start and Stop a Clock

<button onclick="startClock()">Start Clock</button>
<button onclick="stopClock()">Stop Clock</button>

<p id="demo"></p>

<script>
let timer;

function startClock() {
  if (!timer) {
    timer = setInterval(showTime, 1000);
  }
}

function showTime() {
  const date = new Date();

  document.getElementById("demo").innerHTML =
    date.toLocaleTimeString();
}

function stopClock() {
  clearInterval(timer);
  timer = undefined;
}
</script>

if (!timer) ব্যবহার করা হয়েছে যাতে একই clock একাধিকবার start করলে একাধিক interval তৈরি না হয়।

setTimeout() vs setInterval()

setTimeout()
→ Runs once after a delay.

setInterval()
→ Runs repeatedly after an interval.

একবার delay-এর পরে function চালাতে setTimeout() ব্যবহার করুন।
বারবার function চালাতে setInterval() ব্যবহার করুন।
Timeout cancel করতে clearTimeout() ব্যবহার করুন।
Interval বন্ধ করতে clearInterval() ব্যবহার করুন।

Passing Arguments to setTimeout()

setTimeout()-এর callback function-এ additional arguments পাঠানো যায়।

setTimeout(showMessage, 2000, "Hello", "John");

function showMessage(greeting, name) {
  console.log(greeting + " " + name);
}

2 seconds পরে output:

Hello John

এখানে "Hello" এবং "John" callback function-এর arguments হিসেবে পাঠানো হয়েছে।

Passing Arguments to setInterval()

একইভাবে setInterval()-এর callback function-এও arguments পাঠানো যায়।

setInterval(showMessage, 2000, "Hello", "Ariful");

function showMessage(greeting, name) {
  console.log(greeting + " " + name);
}

এটি প্রতি 2 seconds পরপর Hello Ariful display করবে।

Repeated setTimeout()

চাইলে একটি function-এর ভিতর থেকে আবার setTimeout() call করে repeating timer তৈরি করা যায়।

function repeat() {
  console.log("Hello");

  setTimeout(repeat, 1000);
}

repeat();

এখানে function execute হওয়ার পরে আবার 1 second delay দিয়ে repeat() call হবে।

Repeated setTimeout()-এর একটি সুবিধা হলো current callback শেষ হওয়ার পরে পরবর্তী delay শুরু হয়।

setInterval() vs Repeated setTimeout()

setInterval() নির্দিষ্ট interval অনুযায়ী callback schedule করে।

অন্যদিকে repeated setTimeout()-এ current task শেষ হওয়ার পরে আবার নতুন delay শুরু করা যায়।

function repeat() {
  console.log("Task started");

  // Task finished

  setTimeout(repeat, 1000);
}

repeat();

যখন একটি task সম্পূর্ণ হওয়ার পরে পরবর্তী delay শুরু করা দরকার হয়, তখন repeated setTimeout() কার্যকর হতে পারে।

Countdown Example

Timer ব্যবহার করে countdown তৈরি করা যায়।

<button onclick="startCountdown()">Start Countdown</button>

<p id="demo"></p>

<script>
let timer;

function startCountdown() {
  clearInterval(timer);

  let count = 10;

  document.getElementById("demo").innerHTML = count;

  timer = setInterval(function() {
    count--;

    document.getElementById("demo").innerHTML = count;

    if (count === 0) {
      clearInterval(timer);

      document.getElementById("demo").innerHTML = "Finished!";
    }
  }, 1000);
}
</script>

এখানে countdown 10 থেকে শুরু হয়ে প্রতি second-এ 1 করে কমবে। 0-তে পৌঁছালে interval বন্ধ হয়ে যাবে।

Avoid Strings as Timer Code

Timer function-এর মধ্যে string হিসেবে JavaScript code পাঠানো সম্ভব হলেও এই পদ্ধতি ব্যবহার করা recommended নয়।

Not Recommended

setTimeout("myFunction()", 1000);

Timers Run on the Main JavaScript Thread

Timer-এর waiting period browser manage করলেও timer callback execute হওয়ার সময় সেটি JavaScript-এর main thread-এ চলে।

তাই callback-এর মধ্যে খুব দীর্ঘ সময় ধরে চলা code থাকলে webpage temporarily unresponsive হতে পারে।

setTimeout(function() {
  let i = 4e9;

  while (--i > 0) {
  }

  console.log("Finished");
}, 1000);

এখানে timer 1 second পরে callback শুরু করার চেষ্টা করবে, কিন্তু callback শুরু হওয়ার পরে long-running loop main thread block করতে পারে।

Timer Does Not Guarantee Exact Timing

Timer-এর delay হলো minimum delay। JavaScript busy থাকলে callback আরও পরে execute হতে পারে।

setTimeout(function() {
  console.log("Timer");
}, 1000);

console.log("Other code");

এখানে 1000 milliseconds হলো callback-এর earliest scheduled time, exact execution time নয়।

Slide Show Using JavaScript Timers

Timer ব্যবহার করে automatic image slideshow তৈরি করা যায়।

<img id="slide"
     src="img_nature.jpg"
     style="width:100%;max-width:600px">

<button onclick="startSlides()">Start</button>
<button onclick="stopSlides()">Stop</button>

<script>
const images = [
  "img_nature.jpg",
  "img_snowtops.jpg",
  "img_mountains.jpg"
];

let index = 0;
let timer;

function showNextSlide() {
  index = (index + 1) % images.length;

  document.getElementById("slide").src = images[index];
}

function startSlides() {
  if (!timer) {
    timer = setInterval(showNextSlide, 3000);
  }
}

function stopSlides() {
  clearInterval(timer);

  timer = undefined;
}
</script>

এখানে প্রতি 3 seconds পরপর নতুন image display হবে।

The Remainder Operator

এখানে % remainder operator ব্যবহার করা হয়েছে। এটি শেষ image-এর পরে index আবার 0-তে ফিরিয়ে দেয়।

index = (index + 1) % images.length;

ফলে slideshow শেষ image-এর পরে আবার প্রথম image থেকে শুরু হয়।

Preventing Multiple Intervals

একটি interval একাধিকবার start করলে একাধিক timer একসাথে চলতে পারে। তাই interval start করার আগে timer already active কি না check করা ভালো।

let timer;

function startTimer() {
  if (!timer) {
    timer = setInterval(function() {
      console.log("Running");
    }, 1000);
  }
}

function stopTimer() {
  clearInterval(timer);
  timer = undefined;
}

Common JavaScript Timer Mistakes

1. Calling the Function Immediately

ভুল:

setTimeout(myFunction(), 1000);

সঠিক:

setTimeout(myFunction, 1000);

2. Forgetting the Timer Identifier

Timer পরে cancel করতে হলে returned identifier save করতে হবে।

const timer = setTimeout(myFunction, 1000);

clearTimeout(timer);

3. Starting Multiple Intervals

একই interval বারবার start করলে multiple timers তৈরি হতে পারে।

if (!timer) {
  timer = setInterval(myFunction, 1000);
}

4. Expecting Exact Timing

setTimeout() বা setInterval() exact execution time guarantee করে না।

5. Forgetting to Stop an Interval

Interval নিজে থেকে বন্ধ হয় না। প্রয়োজন হলে clearInterval() ব্যবহার করতে হবে।

clearInterval(timer);

Difference Between setTimeout() and setInterval()

setTimeout()
→ Runs a function once after a delay.

setInterval()
→ Runs a function repeatedly.

clearTimeout()
→ Cancels a timeout.

clearInterval()
→ Stops a repeating interval.

Timers and Asynchronous JavaScript

setTimeout() এবং setInterval() JavaScript-এ asynchronous programming বোঝার জন্য খুব গুরুত্বপূর্ণ example।

Browser timer-এর waiting period manage করে এবং callback-কে পরে execute করার জন্য schedule করে।

console.log("Start");

setTimeout(function() {
  console.log("Timer");
}, 0);

console.log("End");

Output:

Start
End
Timer

এখানে Timer শেষে এসেছে কারণ current JavaScript task শেষ হওয়ার পরে callback execute করার সুযোগ পেয়েছে।

JavaScript Timer Best Practices

একবার কোনো কাজ delay করে চালাতে setTimeout() ব্যবহার করুন।
বারবার কোনো কাজ চালাতে setInterval() ব্যবহার করুন।
Function callback হিসেবে পাঠানোর সময় অপ্রয়োজনীয় () ব্যবহার করবেন না।
Cancel করার প্রয়োজন হলে timer identifier সংরক্ষণ করুন।
অপ্রয়োজনীয় multiple intervals তৈরি হওয়া থেকে বিরত থাকুন।
Timer delay-কে exact execution time হিসেবে ধরে নেবেন না।
Long-running JavaScript code এড়িয়ে চলুন, কারণ এটি main thread block করতে পারে।
প্রয়োজন শেষ হলে interval অবশ্যই clearInterval() দিয়ে বন্ধ করুন।

Conclusion

JavaScript Timers web development-এর একটি গুরুত্বপূর্ণ concept। setTimeout() ব্যবহার করে নির্দিষ্ট delay-এর পরে একবার function চালানো যায় এবং setInterval() ব্যবহার করে নির্দিষ্ট interval অনুযায়ী function বারবার চালানো যায়।

Timer বন্ধ করার জন্য clearTimeout() এবং clearInterval() ব্যবহার করা হয়।

JavaScript timer শেখার সময় বিশেষভাবে callback function, delay, timer identifier, zero-delay behavior, minimum delay এবং asynchronous execution বিষয়গুলো ভালোভাবে বোঝা গুরুত্বপূর্ণ।

এই concepts ভালোভাবে বুঝতে পারলে countdown, digital clock, slideshow, automatic content updates এবং বিভিন্ন interactive web features তৈরি করা অনেক সহজ হয়ে যাবে।

JavaScript Timers কী? setTimeout & setInterval সহজ গাইড

JavaScript Timers কী?

JavaScript Timer Functions

The setTimeout() Function

Syntax

Example

Understanding Callback Function

Passing a Function to setTimeout()

Correct

Incorrect

Using an Anonymous Function

Timers Do Not Pause JavaScript

A Zero Millisecond Delay

The Delay Is a Minimum

Canceling a Timeout

Syntax

Example

Start and Stop a Timeout

The setInterval() Function

Syntax

Example

Displaying Current Time Every Second

Canceling an Interval

Syntax

Example

Start and Stop a Clock

setTimeout() vs setInterval()

Passing Arguments to setTimeout()

Passing Arguments to setInterval()

Repeated setTimeout()

setInterval() vs Repeated setTimeout()

Countdown Example

Avoid Strings as Timer Code

Not Recommended

Recommended

Timers Run on the Main JavaScript Thread

Timer Does Not Guarantee Exact Timing

Slide Show Using JavaScript Timers

The Remainder Operator

Preventing Multiple Intervals

Common JavaScript Timer Mistakes

1. Calling the Function Immediately

2. Forgetting the Timer Identifier

3. Starting Multiple Intervals

4. Expecting Exact Timing

5. Forgetting to Stop an Interval

Difference Between setTimeout() and setInterval()

Timers and Asynchronous JavaScript

JavaScript Timer Best Practices

Conclusion

Post a Comment