JavaScript Timing Events

শব্দ ঘটনা শিখুন

জাভাস্ক্রিপ্ট টাইমআউট ইভেন্ট

টাইমআউট ইভেন্টগুলি আপনাকে কোড চালানোর অনুমতি দেয়:

টাইমআউট কম্পিউটার ঘড়ি দ্বারা উত্পন্ন টাইমআউট ইভেন্ট দ্বারা চালিত হয়।

টাইমার ফাংশন

ফাংশন ব্যাখ্যা
setTimeout() একটি ঘড়ির সময়সীমা সেট করে (একবার চলে)
setInterval() একটি ঘড়ির ব্যবধান সেট করে (পুনরাবৃত্তি)
clearTimeout() একটি মেয়াদ সাফ করে
clearInterval() একটি ফাঁক পরিষ্কার করে

ℹ️দ্রষ্টব্য:

টাইমার ফাংশন উইন্ডো অবজেক্টের অন্তর্গত।

setTimeout()হয়window.setTimeout()same as

একটি ঘড়ি

উদাহরণ

<p id="clock"></p>

<script>
// Call showTime every 1000 millisec
setInterval(showTime, 1000);

// Fuction to display the time
function showTime() {
  const d = new Date();
  document.getElementById("clock").innerHTML =
  d.getHours() + ":" + d.getMinutes() + ":" + d.getSeconds();
}
</script>

লাইভ ঘড়ি প্রদর্শনী

জাভাস্ক্রিপ্ট ঘড়ি:

--:--:--

setInterval(showTime, 1000)শোটাইম ফাংশনটি প্রতি 1000 মিলিসেকেন্ডে (1 সেকেন্ড) কল করুন।

setTimeout() পদ্ধতি

setTimeout()পদ্ধতিটি মিলিসেকেন্ডে বিলম্বের পরে একটি অপারেশন চালায়।

setTimeout(function, delay, p1,...,pN)

পরামিতি

প্যারামিটার ব্যাখ্যা
function টাইমারের মেয়াদ শেষ হলে একটি ফাংশন কল করা প্রয়োজন।
delay ঐচ্ছিক। টাইমারের মিলিসেকেন্ড অপেক্ষা করা উচিত। ডিফল্ট হল 0 (তাৎক্ষণিক)।
p1,...,pN ঐচ্ছিক। আর্গুমেন্ট ফাংশন পাস.

রিটার্ন মান

টাইপ ব্যাখ্যা
পূর্ণসংখ্যা একটি পূর্ণসংখ্যা যা টাইমারটিকে অনন্যভাবে সনাক্ত করে। এর পরে "এক্সপায়ার আইডি"।clearTimeout()টাইমার পাঠানো এবং বাতিল করা যেতে পারে.

উদাহরণ

<button id="btn">Start</button>

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

<script>
// let btn listen for a click
document.getElementById("btn").addEventListener("click", function () {
// Then call showMsg after 2 seconds
  setTimeout(showMsg, 2000);
});

// Function to display message
function showMsg() {
  document.getElementById("demo").innerHTML = "Hello after 2 seconds!";
}
</script>

💡দ্রষ্টব্য:

setTimeout()মেথড হল অ্যাসিঙ্ক্রোনাস জাভাস্ক্রিপ্টের একটি মূল অংশ যা মূল এক্সিকিউশন থ্রেড ব্লক না করেই কোড এক্সিকিউশনের সময়সূচী করতে দেয়।

সেটটাইমআউট ডেমোনস্ট্রেশন

লেটেন্সি মুভমেন্ট টেস্ট:

0%
সেটটাইমআউট আউটপুট এখানে উপস্থিত হয়...
⏱️ সেটটাইমআউট ইভেন্ট লগ: ইভেন্টগুলি এখানে উপস্থিত হয়...

setInterval() পদ্ধতি

setInterval()একটি পদ্ধতি একটি ফাংশনকে বারবার কল করে।

setInterval(function, delay, p1,...,pN)

পরামিতি

প্যারামিটার ব্যাখ্যা
function প্রতিটি ব্যবধানের জন্য একটি ফাংশন কল করা প্রয়োজন।
delay ঐচ্ছিক। প্রতিটি ফাংশন কলের মধ্যে মিলিসেকেন্ড। ডিফল্ট 0।
p1,...,pN ঐচ্ছিক। আর্গুমেন্ট ফাংশন পাস.

রিটার্ন মান

টাইপ ব্যাখ্যা
পূর্ণসংখ্যা একটি পূর্ণসংখ্যা যা টাইমারটিকে অনন্যভাবে সনাক্ত করে। এর পরে "এক্সপায়ার আইডি"।clearInterval()টাইমার পাঠানো এবং বাতিল করা যেতে পারে.

উদাহরণ

setInterval()আমিclearInterval()এর সাথে ব্যবহার করুন:

<button id="start">Start Counter</button>
<button id="stop">Stop</button>

<p id="counter">0</p>

<script>
let myInterval;
let count = 0;

const btnStart = document.getElementById("start");
const btnStop = document.getElementById("stop");

// let btnStart listen for a click
document.getElementById("start").addEventListener("click", function () {
// Then start counter
  myInterval = setInterval(counter, 1000);
});

// let btnStop listen for a click
document.getElementById("stop").addEventListener("click", function () {
// Then stop counter
  clearInterval(myInterval);
});

function counter() {
  count++;
  document.getElementById("counter").innerHTML = count;
}
</script>

💡দ্রষ্টব্য:

setTimeout()পদ্ধতি একটি বিলম্বের পরে শুধুমাত্র একবার একটি ফাংশন চালায়।

setInterval()পদ্ধতিটি প্রতিটি ব্যবধানে একটি ফাংশন বারবার কার্যকর করে।

গণনা যে বিক্ষোভ

গণনা পরীক্ষা:

0

setInterval(counter, 1000)প্রতি 1000 মিলিসেকেন্ডে (1 সেকেন্ড) কাউন্টার ফাংশন কল করে।

🔢 সেট ইন্টারভাল ইভেন্ট লগ: ইভেন্টগুলি এখানে উপস্থিত হয়...

গণনা প্রদর্শন

কাউন্টডাউন পরীক্ষা:

10
00
মিনিট
00
সেকেন্ড
000
মিলিসেকেন্ড
কাউন্টডাউন আউটপুট এখানে প্রদর্শিত হবে...

setTimeout vs setInterval

setTimeout()

উদ্দেশ্য:এক সময় গতি

কার্যকলাপ:বিলম্বের পর একবার রান করে

থামুন:স্বয়ংক্রিয়ভাবে থেমে যায়

আবেদন:বিলম্বিত বার্তা, এককালীন অ্যানিমেশন

setInterval()

উদ্দেশ্য:একটানা আন্দোলন

কার্যকলাপ:প্রতি ব্যবধানে রান

থামুন:clearInterval() প্রয়োজন

আবেদন:ঘড়ি, সংখ্যা, অ্যানিমেশন

⚠️গুরুত্বপূর্ণ নোট:

  • setTimeout()এবংsetInterval()এবং যথাক্রমে আইডি দিনclearTimeout()এবংclearInterval()দিয়ে বাতিল করা যেতে পারে
  • টাইমারগুলি ক্রমিকভাবে ক্লক করা হয় এবং সমস্ত বিরতিতে সঠিক সময়ের গ্যারান্টি দেয় না
  • পৃষ্ঠা থেকে প্রস্থান করার সময় সর্বদা টাইমার পরিষ্কার করুন, অন্যথায় একটি মেমরি লিক হতে পারে
  • requestAnimationFrame() অ্যানিমেশনের জন্য দুর্দান্ত কারণ এটি ব্রাউজারের পুনরায় পেইন্ট চক্রের সাথে সিঙ্ক্রোনাইজ করে

অনুশীলন করুন

নিচের কোনটি প্রতি ব্যবধানে একটি ফাংশন বারবার কার্যকর করার সঠিক পদ্ধতি?

setTimeout()
✗ ভুল! setTimeout() বিলম্বের পরে শুধুমাত্র একবার একটি ফাংশন চালায়
setInterval()
✓ ঠিক আছে! setInterval() হল প্রতি ব্যবধানে একটি ফাংশন বারবার চালানোর সঠিক পদ্ধতি
repeat()
✗ ভুল! repeat() জাভাস্ক্রিপ্টে একটি আইনি টাইমিং ফাংশন নয়
loop()
✗ ভুল! loop() জাভাস্ক্রিপ্টে একটি আইনি টাইমিং ফাংশন নয়