JavaScript Timing Events – সম্পূর্ণ বাংলা টিউটোরিয়াল
JavaScript Timing Events ব্যবহার করে আপনি নির্দিষ্ট সময় পর একটি কাজ চালাতে পারেন বা কিছু নির্দিষ্ট সময় অন্তর অন্তর পুনরাবৃত্তি করতে পারেন। এটি ওয়েবসাইটে অ্যানিমেশন, অটো-স্লাইডার, টাইম-ভিত্তিক বার্তা ইত্যাদি তৈরিতে খুবই সহায়ক।
JavaScript-এ মূলত দুটি Timing Event আছে:
- setTimeout() – একটি নির্দিষ্ট সময় পর একটি কাজ চালাতে ব্যবহৃত হয়।
- setInterval() – নির্দিষ্ট সময় অন্তর একটি কাজ বারবার চালাতে ব্যবহৃত হয়।
1. setTimeout()
setTimeout() ফাংশনটি ব্যবহার করে আপনি নির্দিষ্ট মিলিসেকেন্ড (1000ms = 1s) পরে একটি ফাংশন চালাতে পারেন।
<script>
setTimeout(function() {
alert("3 সেকেন্ড পরে এটি চালু হয়েছে!");
}, 3000);
</script>
উপরের কোডটি চালালে, ৩ সেকেন্ড পর একটি এলার্ট বক্স দেখাবে।
2. setInterval()
setInterval() একটি নির্দিষ্ট সময় পর পর একটি কাজ বারবার চালায়।
<script>
setInterval(function() {
console.log("২ সেকেন্ড পরপর এটি চলবে");
}, 2000);
</script>
এটি প্রতিবার ২ সেকেন্ড পর পর কনসোলে মেসেজ দেখাবে যতক্ষণ না আপনি বন্ধ করেন।
3. clearTimeout() এবং clearInterval()
কখনো কখনো আপনি টাইমার বন্ধ করতে চাইবেন। তখন clearTimeout() বা clearInterval() ব্যবহার করা হয়। এগুলোর জন্য আগে টাইমারকে একটি ভ্যারিয়েবলে রাখতে হয়।
<script>
var myTimer = setInterval(function() {
console.log("রান হচ্ছে");
}, 1000);clearInterval(myTimer);
console.log(“স্টপ হয়েছে”);
}, 5000);
</script>
এখানে কোডটি প্রতি সেকেন্ডে কনসোলে “রান হচ্ছে” দেখাবে, কিন্তু ৫ সেকেন্ড পর সেটি বন্ধ হয়ে যাবে।
setTimeout vs setInterval তুলনা টেবিল:
| মেথড | কাজ | কতবার চলে |
|---|---|---|
| setTimeout() | একবার নির্দিষ্ট সময় পরে চলে | ১ বার |
| setInterval() | বারবার নির্দিষ্ট সময় পর চলে | একাধিক বার |
উপসংহার
JavaScript Timing Events ওয়েবসাইটে স্বয়ংক্রিয় কাজ করাতে এবং ইউজার ইন্টারঅ্যাকশন উন্নত করতে ব্যবহার করা হয়। আপনি Timer, Clock, Auto-refresh বা ডায়নামিক ফিচার তৈরি করতে এগুলো ব্যবহার করতে পারেন।
চর্চার জন্য আইডিয়া:
- Digital clock তৈরি করুন
- Auto slider বানান
- Countdown Timer তৈরি করুন
- Popup delay সহ দেখান