জাভাস্ক্রিপ্ট setTimeout() ফাংশন টিউটোরিয়াল (JavaScript setTimeout Function Tutorial in Bangla)

জাভাস্ক্রিপ্ট setTimeout() ফাংশন টিউটোরিয়াল (JavaScript setTimeout Function Tutorial in Bangla)

জাভাস্ক্রিপ্টে setTimeout() নামে একটা ফাংশন আছে যেটা দিয়ে একটা ফাংশন তথা কোডব্লক নির্দিষ্ট সময় পর এক্সিকিউট করাতে পারেন স্বয়ংক্রিয়ভাবে। এটা setInterval() ফাংশনের মতই একটা ফাংশন। শুধু ছোট্র কয়েকটি পাথর্ক্য আছে। গুরত্বপূর্ন পার্থক্যটি হল setTimeout() ফাংশনে যে সময় দেয়া হবে সেটা পার হবার পর একবার কোডব্লক এক্সিকিউট হয় অপরদিকে setInterval() ফাংশনে যে সময় দেয়া থাকে সেই সময় পর পর কোডব্লক অটোমেটিক অনির্দিষ্টকালের জন্য এক্সিকিউট হতে থাকবে, কখনও থামবেনা।
setTimeout() এর ভিতরে প্যারামিটার হিসেবে প্রথমে ফাংশনটির নাম বা পুরো কোডটুকুই লিখে দিতে পারেন এবং দ্বিতীয় প্যারামিটারে সময় দিতে হয়। মিলিসেকেন্ডে সময় দিতে হয়। যেমন ১ সেকেন্ড পর যদি কোডটি চালাতে চান তাহলে দিবে ১০০০।

1.setTimeout('refreshUserList()',4000);

এই উদাহরনে refreshUserList() নামের ফাংশনটি ৪ সেকেন্ড পর রান করবে। যদি সরাসরি কোড দিতে চান ফাংশন না দিয়ে তাহলে নিচের মত করে দিতে হবে।

1.setTimeout(function(){

2.//any js code

3.}, 5000);

উদাহরন ১ : একটা h1 (একটা হেডিং) ট্যাগ ৫ সেকেন্ড পর যদি লোড করাতে চাই তাহলে

1.$(document).ready(function(){

2.$('h1').hide();

3.setTimeout(function(){

4.$('h1').slideDown();

5. 

6.},5000);

7.});

প্রয়োগ দেখুন
ব্যাখ্যা: প্রথমে $('h1').hide(); দিয়ে হেডিংটি লুকিয়ে রেখেছি এরপর setTimeout() এ slideDown() দিয়ে হেডিংটি দৃশ্যমান করেছি তবে ৫ সেকেন্ড পরে। "প্রয়োগ দেখুন" এ গিয়ে দেখুন ৫ সেকেন্ড পর হেডিংটি স্লাইডিং করে দৃশ্যমান হচ্ছে।
ধরুন উপরের উদাহরনে h1 ৫ সেকেন্ড পরে লোড হবার আগেই আপনি থামিয়ে দিতে চান তাহলে clearTimeout() ফাংশনটি দিয়ে সেটা করতে পারেন। এজন্য আপনাকে setTimeout() ফাংশনটি আগে একটা ভেরিয়েবলে নিয়ে নিতে হবে। যেমন

01.$(document).ready(function(){

02.var sliderId;

03.$('h1').hide();

04.sliderId = setTimeout(function(){

05.$('h1').slideDown();

06. 

07.},5000);

08.$('#cancel').click(function(){

09.clearTimeout(sliderId);

10.});

11.});

প্রয়োগ দেখুন
দেখুন sliderId নামের একটি ভেরিয়েবলে পুরো setTimeout() ঢুকিয়ে দিয়েছি এরপর cancel বাটনে ক্লিক করলে clearTimeout() এর ভিতর sliderId দিয়ে একশন থামিয়ে দিয়েছি। এখন এই্ কোড রান করিয়ে দেখুন ৫ সেকেন্ড পরে h1 স্লাইডিং করে বের হবে তবে যদি ৫ সেকেন্ডের আগেই cancel বাটনে ক্লিক করেন তাহলে আর স্লাইডিং হবেনা।
উপরের দুটি উদাহরনেই setTimeout() এর ভিতরেই কোড লিখেছি, এবার ঐ কোডগুলিই ফাংশন ব্যবহার করে একটি উদাহরন-

01.var sliderId;

02.$(document).ready(function(){

03.$('h1').hide();

04.slider();

05.$('#cancel').click(function(){

06.stopSlider();

07.});

08.});

09. 

10.function slider(){

11.sliderId = setTimeout(function(){

12.$('h1').slideDown();

13. 

14.},5000);

15.}

16.function stopSlider(){

17.clearTimeout(sliderId);

18.}

ব্যাখ্যা: slider নামে ফাংশন তৈরী করে সেখানে h1 এর স্লাইডিং কোডটুকু রেখেছি এবং stopSlider নামে আরেকটি ফাংশন তৈরী করে সেখানে clearTimeout() রেখেছি। আর ready ইভেন্টে slider ফাংশন দিয়ে পেজ লোড হবার সাথে সাথে স্লা্‌ইডিং হবে এ নির্দেমনা দিয়েছি। সবশেষে cancel আইডিধারী বাটনে ক্লিক করলে stopSlider() ফাংশন কল করেছি।
আগের উদহারনে জাভাস্ক্রিপ্টের কোড এই কোড দিয়ে প্রতিস্থাপন করে প্রয়োগ দেখে নিতে পারেন।
এখানে যদিও setTimeout() ফাংশনটি জাভাস্ক্রিপ্টের ফাংশন, তবে আমরা উদহারনে জেকোয়েরি ব্যবহার করেছি। জেকোয়েরিতে যেকোন জাভাস্ক্রিপ্টের ফাংশন ব্যবহার করতে পারেন। আর জেকোয়েরি না জানলে আমাদের জেকোয়েরি টিউটোরিয়াল দেখে আসতে পারেন।