JavaScript:رویدادهای زمانبندی شده در جاوااسکریپت
جاوااسکریپت می‌تواند در بازه‌های زمانی مختلف اجرا شود. [۱]
به این‌کار رویدادهای زمانبندی شده می‌گویند.
محتویات
رویدادهای زمانبندی شده
شیءwindowاجازه اجرای کد در یک بازه زمانی مشخص را می‌دهد.
این بازه‌های زمانی را رویدادهای زمانبندی شده می‌نامند.
دو متد کلیدی برای استفاده در جاوااسکریپت، عبارتند از:
setTimeout(function, milliseconds)
یک تابع را بعد از گذشت یک مدت میلی ثانیه مشخص اجرا می‌کند.
setTimeout(function, milliseconds)
همانند تابع setTimeout() است، اما اجرای تابع را به صورت ادامه‌دار تکرار می‌کند.
 | دو متد setTimeout()و setInterval()دو متد شیء پنجره در HTML DOM هستند. |
متد setTimeout()
window.setTimeout(function, milliseconds);
متد window.setTimeout()را می‌توان بدون پیشوند window نوشت.
پارامتر اول تابعی است که می‌بایست اجرا شود.
پارامتر دوم مدت زمانی که می‌بایست قبل از اجرا بگذرد را به میلی ثانیه دریافت می‌کند.
مثال
روی یک دکمه کلیک کنید. ۳ ثانیه صبر کنید، و صفحه به شما پیغام "Hello" را به صورت جعبه هشدار (به انگلیسی: alert) نمایش می‌دهد:
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
چگونه اجرا را متوقف کنیم؟
متد clearTimeout()اجرای تابع مشخص شده در متد setTimeout() را متوقف می‌کند.
window.clearTimeout(timeoutVariable)
متد window.clearTimeout()را می‌توان بدون پیشوند window نوشت.
متدclearTimeout()متغیر برگشتی از متد setTimeout()رامشخص می‌کند:
myVar = setTimeout(function, milliseconds);
clearTimeout(myVar);
اگر متد اجرا نشد، شما می‌توانید اجرا را با فراخوانی متد clearTimeout() متوقف کنید:
مثال
همانند مثال بالا، اما دکمه "Stop" اضافه شده‌است:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
متد setInterval()
متد setInterval()یک تابع را در یک بازه زمانی مشخص تکرار می‌کند.
window.setInterval(function, milliseconds);
متد window.setInterval()را می‌توان بدون پیشوند window نوشت.
پارامتر اول، تابعی است که می‌بایست اجرا شود.
پارامتر دوم، مدت زمانی که می‌بایست بین هر اجرا صبر شود را دریافت می‌کند.
این مثال، تابعی به نام "myTimer" را هر یک ثانیه (همانند یک ساعت دیجیتال) فراخوانی می‌کند.
مثال
نمایش زمان فعلی:
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
| در یک ثانیه، ۱۰۰۰ میلی ثانیه وجود دارد. |
چگونه اجرا را متوقف کنیم؟
متد clearInterval()اجرای تابع مشخص شده در متد setInterval() را متوقف می‌کند.
window.clearInterval(timerVariable)
متد window.clearInterval()را می‌توان بدون پیشوند window نوشت.
متد clearInterval() از متغیر بازگشتی متد setInterval() استفاده می‌کند:
myVar = setInterval(function, milliseconds);
clearInterval(myVar);
مثال
همانند مثال بالا، اما ما یک دکمه متوقف کردن زمان یا " Stop time" اضافه کردیم:
<p id="demo"></p>
<button onclick="clearInterval(myVar)">Stop time</button>
<script>
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
</script>
مثال‌های بیشتر
ساعتی که با یک رویداد زمانبندی شده ساخته شده‌است.
منابع آموزشی