سبد (0)

تبلیغات

زمانبندی رویدادها در JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

در JavaScript، می توان یک تابع را در فاصله های زمانی معین اجرا کرد.

این قابلیت زمانبدی رویدادها (Timing Events) نامیده می شود.


زمانبدی رویدادها (Timing Events) در JavaScript

Wiki

در JavaScript، این امکان وجود دارد که یک قطعه کد را در فاصله های زمانی معیین (time-intervals) اجرا کنید. به این امکان "زمانبندی رویدادها" یا (Timing Events) می گویند.

دو متد (method) ساده برای زمانبدی رویدادها وجود دارد:

  • ()setInterval: در فاصله های زمانی معیین، یک تابع را بارها و بارها اجرا می کند.
  • ()setTimeout: بعد از گذشت یک فاصله زمانی معیین، یک تابع را یکبار اجرا می کند.

توجه: متدهای ()setInterval و ()setTimeout هر دو جزء متدهای شیء window در مدل DOM هستند.


متد ()setInterval

Wiki

متد ()setInterval، در فاصله های زمانی معین، یک تابع مشخص را بارها و بارها اجرا می کند.

نحوه استفاده:

window.setInterval("javascript function",milliseconds);

متد ()window.setInterval را می توان بدون پیشوند window نیز نوشت.

پارامتر اول متد ()setInterval باید یک تابع باشد.

پارامتر دوم، فاصله های زمانی بین هر بار اجرای تابع را مشخص می کند. (برحسب میلی ثانیه)

توجه: هر 1000 میلی ثانیه معادل 1 ثانیه است.

مثال (زمانبندی رویدادها در JavaScript)

هر 3 ثانیه یکبار، پیغام "Hello" نمایش داده می شود:

setInterval(function(){alert("Hello")},3000);
خودتان امتحان کنید »

این مثال، فقط طرز کار متد ()setInterval را نشان می دهد و اینکه بخواهید هر 3 ثانیه یکبار یک پیغام را نمایش دهید خیلی واقعی نیست.

در مثال زیر، متد ()setInterval برای نمایش یک ساعت دیجیتال، تابع ()myTimer را هر 1 ثانیه یکبار اجرا می کند:

مثال (زمانبندی رویدادها در JavaScript)

نمایش زمان جاری:

var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{
var d=new Date();
var t=d.toLocaleTimeString();
document.getElementById("demo").innerHTML=t;
}
خودتان امتحان کنید »

چگونه اجرا را متوقف کنیم؟

Wiki

متد ()clearInterval، برای توقف اجرای تابع مشخص شده در ()setInterval استفاده می شود.

نحوه استفاده:

window.clearInterval(intervalVariable)

متد ()window.clearInterval را می توان بدون پیشوند window نیز نوشت.

برای اینکه بتوان از متد ()clearInterval استفاده کرد، باید زمان ایجاد متد ()setInterval، از یک متغیر عمومی استفاده کرد:

myVar=setInterval("javascript function",milliseconds);

سپس قادر خواهید بود برای توقف اجرای تابع، از متد ()clearInterval استفاده کنید.

مثال (زمانبندی رویدادها در JavaScript)

مثال زیر مانند قبل است، اما یک دکمه "Stop time" به آن اضافه شده است:

<p id="demo"></p>
<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

Wiki

متد ()setTimeout، بعد از گذشت یک فاصله زمانی معیین، یک تابع را یکبار اجرا می کند

نحوه استفاده:

window.setTimeout("javascript function",milliseconds);

متد ()window.setTimeout را می توان بدون پیشوند window نیز نوشت.

پارامتر اول متد ()setTimeout باید یک تابع باشد.

پارامتر دوم، نشان می دهد که از حالا چند میلی ثانیه دیگر می خواهید پارامتر اول، اجرا شود. (برحسب میلی ثانیه)

مثال (زمانبندی رویدادها در JavaScript)

بعد از گذشت 3 ثانیه پیغام "Hello" ظاهر می شود:

setTimeout(function(){alert("Hello")},3000);
خودتان امتحان کنید »

چگونه اجرا را متوقف کنیم؟

Wiki

متد ()clearTimeout، برای توقف اجرای تابع مشخص شده در ()setTimeout استفاده می شود.

نحوه استفاده:

window.clearTimeout(timeoutVariable)

متد ()window.clearTimeout را می توان بدون پیشوند window نیز نوشت.

برای اینکه بتوان از متد ()clearTimeout استفاده کرد، باید زمان ایجاد متد ()setTimeout، از یک متغیر عمومی استفاده کرد:

myVar=setTimeout("javascript function",milliseconds);

سپس، اگر تابع قبلاً اجرا نشده باشد، قادر خواهید بود برای توقف اجرای تابع، از متد ()setTimeout استفاده کنید.

مثال (زمانبندی رویدادها در JavaScript)

مثال زیر مانند قبل است، اما یک دکمه "Stop time" به آن اضافه شده است:

var myVar;

function myFunction()
{
myVar=setTimeout(function(){alert("Hello")},3000);
}

function myStopFunction()
{
clearTimeout(myVar);
}
خودتان امتحان کنید »

مثال - خودتان امتحان کنید

یک مثال ساده

ایجاد یک ساعت دیجیتال

دیدگاه‌ها  

+2 # negar 1394-08-24 10:22
همین صفحه
آخرین خطها....دو مثال زدین برای خودتان امتحان کنید قسمت آخر
ا یک مثال ساده
2 ساعت دیجیتال
برای ساعت دیجیتال زدین هر 500 میلی ثانیه تغییر کند
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-24 11:50
عدد موردنظر بر حسب میلی ثانیه است. 500 یعنی 0.5 ثانیه.
شما میتونید 1000 بذارید تا هر 1 ثانیه تغییر کنید.

عدد موردنظر صرفا برای مثال هست!!!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # negar 1394-08-24 09:37
برای مثال پایین ساعت دیجیتال..چرا نوشتین هر 500 میلی ثانیه تغییر کنه؟!
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-24 10:03
با سلام.
کدوم مثال؟

اینجا 500 میلی ثانیه من نمی بینم.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # java 1394-08-09 12:18
سلام
توقسمت clear interval
من میخوام یه دکمه بذارم که روش میزنی تایم رو استوپ گنه ذباره رو همون دکمه میزنی تایم رو شروع کنه
با چند تا if تست کردم و لی خب جواب خیلی درستی نگرفتم چطوری هستش دقیق اگه بخوام این کارو بکنم
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # مهرداد صلاحی 1394-08-09 13:38
کد زیر یه مثال ساده است.
<script type="text /javascript&quo t;>
var RefreshShow;

function mycode() {
// codes ...
RefreshShow = setTimeout(myco de, 1000);
};

function stop(){
clearTimeout(RefreshShow);
}
</script>


کدهای تابع رو به جای ... codes // بذارید. به تعریف متغیر در خارج از تابع هم دقت کنید.
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # java 1394-08-09 17:20
نه کلا من منظورم این بود که اون جایی که یه ساعت دیجیتال ساده تنظیم کردید یه استوپ تایم براش گذاشتید که اون استوپ تایم کلا ساعتو نگه میداره من میخوام کاری کنم که وقتی روش میزنی ساعت رو نگه داره و و قتی دوباره روش میزنه ساعت شروع به تایم انداختن کنه
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # مهرداد صلاحی 1394-08-09 20:21
کد زیر رو کلا در یه فایل کپی و اجرا کنید و نتیجه رو مشاهده کنید. به جای ساعت تایمر با وقفه‌ی 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>
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+1 # acal weeky 1394-02-13 13:00
سلام
ممنون از سایت بسیار عالی تون
متد cleartimeout و settimeout در چه موردی کاربرد داره؟
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن
+2 # امیر پهلوان صادق 1394-02-15 19:44
در مثال "ایجاد یک ساعت دیجیتال" از متد settimeout استفاده شده است.
http://beyamooz.com/try_it_yourself/tryit.php?filename=tryjs_timing_clock
پاسخ دادن | پاسخ به نقل قول | نقل قول کردن

آموزش صوتی JavaScript

بستن
مدرس:
سوال و جواب:

ابزاری که در پیش روی دارید یکی از ابزارهای بسیار کاربردی سایت بیاموز در زمینه آموزش است، این ابزار برای سهولت یادگیری شما کاربران محترم طراحی شده است.

فقط کافی است روی عنوان پاراگراف مورد نظرتان کلیک کنید تا پخش صدا آغاز شود ...!

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی