رویدادهای زمان در JavaScript
یادگیری JavaScriptرویدادهای زمان
شیء window اجازه اجرای کد را در فواصل زمانی مشخص می دهد.
این فاصله زمانی وقایع زمان بندی نامیده می شود.
دو روش کلیدی برای استفاده با جاوا اسکریپت عبارتند از:
setTimeout (عملکرد، میلی ثانیه)
بعد از انتظار یک تعداد مشخصی از میلی ثانیه، یک تابع را اجرا می کند.
setInterval (عملکرد، میلی ثانیه)
همانند ()setTimeout ، اما اجرای تابع را به طور مداوم تکرار می کند.
روش ()setTimeout
روش ()window.setTimeout می تواند بدون پیشوند window نوشته شود.
اولین پارامتر یک تابع است که باید اجرا شود.
پارامتر دوم نشان دهنده تعداد میلی ثانیه قبل از اجرای است.
<button onclick="setTimeout(myFunction, 3000)">Try it</button>
<script>
function myFunction() {
alert('Hello');
}
</script>
مشاهده مثالچگونه می توان اجرا را متوقف کرد؟
روش ()clearTimeout اجرای تابع مشخص شده در ()setTimeout را متوقف می کند.
روش ()clearTimeout از متغیر return از ()setTimeout استفاده می کند:
clearTimeout(myVar);
اگر تابع قبلا اجرا نشده است، می توانید اجرا را با فراخوانی روش ()clearTimeout متوقف کنید:
<button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button>
<button onclick="clearTimeout(myVar)">Stop it</button>
مشاهده مثالروش ()setInterval
روش ()setInterval تابع داده شده را در هر زمان معین یک بار تکرار می کند.
اولین پارامتر تابع اجرا می شود.
پارامتر دوم نشان دهنده طول فاصله زمانی بین هر اجرای است.
این مثال یک تابع به نام "myTimer" را یکبار در هر ثانیه اجرا می کند (مانند یک ساعت دیجیتال).
var myVar = setInterval(myTimer, 1000);
function myTimer() {
var d = new Date();
document.getElementById("demo").innerHTML = d.toLocaleTimeString();
}
مشاهده مثالنکته: یک ثانیه 1000 میلی ثانیه می باشد.
چگونه می توان اجرا را متوقف کرد؟
روش ()clearInterval اشیاء تابع مشخص شده در روش ()setInterval را متوقف می کند
روش ()clearInterval از متغیر return از ()setInterval استفاده می کند:
clearInterval(myVar);
<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>
مشاهده مثال
نظر شما
>