زمانبندی رویدادها در JavaScript
|
در JavaScript، می توان یک تابع را در فاصله های زمانی معین اجرا کرد. این قابلیت زمانبدی رویدادها (Timing Events) نامیده می شود. |
زمانبدی رویدادها (Timing Events) در JavaScript
در JavaScript، این امکان وجود دارد که یک قطعه کد را در فاصله های زمانی معیین (time-intervals) اجرا کنید. به این امکان "زمانبندی رویدادها" یا (Timing Events) می گویند.
دو متد (method) ساده برای زمانبدی رویدادها وجود دارد:
- ()setInterval: در فاصله های زمانی معیین، یک تابع را بارها و بارها اجرا می کند.
- ()setTimeout: بعد از گذشت یک فاصله زمانی معیین، یک تابع را یکبار اجرا می کند.
توجه: متدهای ()setInterval و ()setTimeout هر دو جزء متدهای شیء window در مدل DOM هستند.
متد ()setInterval
متد ()setInterval، در فاصله های زمانی معین، یک تابع مشخص را بارها و بارها اجرا می کند.
نحوه استفاده:
متد ()window.setInterval را می توان بدون پیشوند window نیز نوشت.
پارامتر اول متد ()setInterval باید یک تابع باشد.
پارامتر دوم، فاصله های زمانی بین هر بار اجرای تابع را مشخص می کند. (برحسب میلی ثانیه)
توجه: هر 1000 میلی ثانیه معادل 1 ثانیه است.
مثال (زمانبندی رویدادها در JavaScript)
هر 3 ثانیه یکبار، پیغام "Hello" نمایش داده می شود:
این مثال، فقط طرز کار متد ()setInterval را نشان می دهد و اینکه بخواهید هر 3 ثانیه یکبار یک پیغام را نمایش دهید خیلی واقعی نیست.
در مثال زیر، متد ()setInterval برای نمایش یک ساعت دیجیتال، تابع ()myTimer را هر 1 ثانیه یکبار اجرا می کند:
مثال (زمانبندی رویدادها در JavaScript)
نمایش زمان جاری:
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
چگونه اجرا را متوقف کنیم؟
متد ()clearInterval، برای توقف اجرای تابع مشخص شده در ()setInterval استفاده می شود.
نحوه استفاده:
متد ()window.clearInterval را می توان بدون پیشوند window نیز نوشت.
برای اینکه بتوان از متد ()clearInterval استفاده کرد، باید زمان ایجاد متد ()setInterval، از یک متغیر عمومی استفاده کرد:
سپس قادر خواهید بود برای توقف اجرای تابع، از متد ()clearInterval استفاده کنید.
مثال (زمانبندی رویدادها در JavaScript)
مثال زیر مانند قبل است، اما یک دکمه "Stop time" به آن اضافه شده است:
<button onclick="myStopFunction()">Stop time</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
function myStopFunction()
{
clearInterval(myVar);
}
</script>
متد ()setTimeout
متد ()setTimeout، بعد از گذشت یک فاصله زمانی معیین، یک تابع را یکبار اجرا می کند
نحوه استفاده:
متد ()window.setTimeout را می توان بدون پیشوند window نیز نوشت.
پارامتر اول متد ()setTimeout باید یک تابع باشد.
پارامتر دوم، نشان می دهد که از حالا چند میلی ثانیه دیگر می خواهید پارامتر اول، اجرا شود. (برحسب میلی ثانیه)
مثال (زمانبندی رویدادها در JavaScript)
بعد از گذشت 3 ثانیه پیغام "Hello" ظاهر می شود:
چگونه اجرا را متوقف کنیم؟
متد ()clearTimeout، برای توقف اجرای تابع مشخص شده در ()setTimeout استفاده می شود.
نحوه استفاده:
متد ()window.clearTimeout را می توان بدون پیشوند window نیز نوشت.
برای اینکه بتوان از متد ()clearTimeout استفاده کرد، باید زمان ایجاد متد ()setTimeout، از یک متغیر عمومی استفاده کرد:
سپس، اگر تابع قبلاً اجرا نشده باشد، قادر خواهید بود برای توقف اجرای تابع، از متد ()setTimeout استفاده کنید.
مثال (زمانبندی رویدادها در JavaScript)
مثال زیر مانند قبل است، اما یک دکمه "Stop time" به آن اضافه شده است:
function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction()
{
clearTimeout(myVar);
}
مثال - خودتان امتحان کنید
- نوشته شده توسط امیر پهلوان صادق
- بازدید: 26223
دیدگاه‌ها
همین صفحه
آخرین خطها....دو مثال زدین برای خودتان امتحان کنید قسمت آخر
ا یک مثال ساده
2 ساعت دیجیتال
برای ساعت دیجیتال زدین هر 500 میلی ثانیه تغییر کند
عدد موردنظر بر حسب میلی ثانیه است. 500 یعنی 0.5 ثانیه.
شما میتونید 1000 بذارید تا هر 1 ثانیه تغییر کنید.
عدد موردنظر صرفا برای مثال هست!!!
برای مثال پایین ساعت دیجیتال..چرا نوشتین هر 500 میلی ثانیه تغییر کنه؟!
با سلام.
کدوم مثال؟
اینجا 500 میلی ثانیه من نمی بینم.
سلام
توقسمت clear interval
من میخوام یه دکمه بذارم که روش میزنی تایم رو استوپ گنه ذباره رو همون دکمه میزنی تایم رو شروع کنه
با چند تا if تست کردم و لی خب جواب خیلی درستی نگرفتم چطوری هستش دقیق اگه بخوام این کارو بکنم
کد زیر یه مثال ساده است.
<script type="text /javascript&quo t;>
var RefreshShow;
function mycode() {
// codes ...
RefreshShow = setTimeout(myco de, 1000);
};
function stop(){
clearTimeout(RefreshShow);
}
</script>
کدهای تابع رو به جای ... codes // بذارید. به تعریف متغیر در خارج از تابع هم دقت کنید.
نه کلا من منظورم این بود که اون جایی که یه ساعت دیجیتال ساده تنظیم کردید یه استوپ تایم براش گذاشتید که اون استوپ تایم کلا ساعتو نگه میداره من میخوام کاری کنم که وقتی روش میزنی ساعت رو نگه داره و و قتی دوباره روش میزنه ساعت شروع به تایم انداختن کنه
کد زیر رو کلا در یه فایل کپی و اجرا کنید و نتیجه رو مشاهده کنید. به جای ساعت تایمر با وقفه‌ی 1 ثانیه گذاشتم.
برای ساعت کدش رو باید جایگزین کنید. همه چیز گویاست. فقط باید یه ذره همت کنید.
<!DOCTYPE html>
<html>
<head>
<title>clock</title>
<script type="text/javascript">
var RefreshShow;
var i = 0;
function mycode() {
i++;
document.getElementById("right").innerHTML = i;
RefreshShow = setTimeout(myco de, 1000);
};
function stop(){
clearTimeout(RefreshShow);
}
</script>
</head>
<body>
<div id="right"></div>
<input type="butt on" value="sta rt" onclick="m ycode()" />
<input type="butt on" value="sto p" onclick="s top()" />
</body>
</html>
سلام
ممنون از سایت بسیار عالی تون
متد cleartimeout و settimeout در چه موردی کاربرد داره؟
در مثال "ایجاد یک ساعت دیجیتال" از متد settimeout استفاده شده است.
beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_timing_clock