رویدادهای زمان‌بندی شده

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
پرش به ناوبری پرش به جستجو

جاوا اسکریپت می‌تواند در بازه‌های زمانی مختلف اجرا شود. [۱]

به این‌کار رویدادهای زمان‌بندی‌شده می‌گویند.

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


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

شیء window اجازه اجرای کد در یک بازه زمانی مشخص را می‌دهد.

این بازه‌های زمانی را رویدادهای زمانبندی شده می‌نامند.

دو متد کلیدی برای استفاده در جاوا اسکریپت، عبارتند از:

  • setTimeout(function, milliseconds)

یک تابع را بعد از گذشت یک مدت میلی ثانیه مشخص اجرا می‌کند.

  • setTimeout(function, milliseconds)

همانند تابع setTimeout() است، اما اجرای تابع را به صورت ادامه‌دار تکرار می‌کند.

دو متد setTimeout() و setInterval() دو متد شیء پنجره در HTML DOM هستند.

متد setTimeout()

window.setTimeout(function, milliseconds);

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

پارامتر اول تابعی است که می‌بایست اجرا شود.

پارامتر دوم مدت زمانی که می‌بایست قبل از اجرا بگذرد را به میلی ثانیه دریافت می‌کند.

مثال

روی یک دکمه کلیک کنید. ۳ ثانیه صبر کنید، و صفحه به شما پیغام "Hello" را به صورت جعبه هشدار (alert) نمایش می‌دهد:

1<button onclick="setTimeout(myFunction, 3000)">Try it</button>
2
3<script>
4function myFunction() {
5 alert('Hello');
6}
7</script>


مشاهدهٔ نتیجه


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

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

window.clearTimeout(timeoutVariable)

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

متد clearTimeout() متغیر برگشتی از متد setTimeout() رامشخص می‌کند:

myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);

اگر متد اجرا نشد، شما می‌توانید اجرا را با فراخوانی متد clearTimeout() متوقف کنید:

مثال

همانند مثال بالا، اما دکمه "Stop" اضافه شده‌است:

1<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
2
3<button onclick="clearTimeout(myVar)">Stop it</button>


مشاهدهٔ نتیجه


متد setInterval()

متد setInterval() یک تابع را در یک بازه زمانی مشخص تکرار می‌کند.

window.setInterval(function, milliseconds);

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

پارامتر اول، تابعی است که می‌بایست اجرا شود.

پارامتر دوم، مدت زمانی که می‌بایست بین هر اجرا صبر شود را دریافت می‌کند.

این مثال، تابعی به نام "myTimer" را هر یک ثانیه (همانند یک ساعت دیجیتال) فراخوانی می‌کند.

مثال

نمایش زمان فعلی:

1var myVar = setInterval(myTimer, 1000);
2
3function myTimer() {
4 var d = new Date();
5 document.getElementById("demo").innerHTML = d.toLocaleTimeString();
6}


مشاهدهٔ نتیجه


در یک ثانیه، ۱۰۰۰ میلی ثانیه وجود دارد.

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

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

window.clearInterval(timerVariable)

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

متد clearInterval() از متغیر بازگشتی متد setInterval() استفاده می‌کند:

myVar = setInterval(function, milliseconds);
clearInterval(myVar);

مثال

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

 1<p id="demo"></p>
 2
 3<button onclick="clearInterval(myVar)">Stop time</button>
 4
 5<script>
 6var myVar = setInterval(myTimer, 1000);
 7function myTimer() {
 8 var d = new Date();
 9 document.getElementById("demo").innerHTML = d.toLocaleTimeString();
10}
11</script>


مشاهدهٔ نتیجه


مثال‌های بیشتر

یک زمان‌بندی ساده دیگر

ساعتی که با یک رویداد زمان‌بندی شده ساخته شده‌است


منابع آموزشی