Timing events چیست؟
رویدادهای زمان بندی یا timing events برای تاخیر در اجرای کد یا تکرار آن در یک بازه‌‌‌ی زمانی بسیار مفید است. دو تابع در جاوا اسکریپت که این کار را انجام می‌‌‌دهند setInterval و setTimeout هستند.
متد setinterval در جاوا اسکریپت
متد setintveral برای زمان‌‌‌هایی که لازم است اطلاعات تازه مثلا در یک سایت در اختیار کاربر قرار بگیرد استفاده می-شود. با استفاده از متد setinterval می‌‌‌توان به صورت خودکار در هر لحظه که خواستیم اطلاعات را به روزرسانی و صفحه را رفرش کنیم.
به عنوان مثالی از کاربرد متد setinterval در جاوا اسکریپت می‌‌‌توان به سایت‌‌‌های نظرسنجی که نتایج و درصدها را به صورت آنلاین و لحظه‌‌‌ای نمایش می‌‌‌دهند و یا سایت‌‌‌های بازی‌‌‌های آنلاین اشاره کرد.
برای رفرش کردن صفحه به صورت خودکار برای این کاربردها یکی از روش‌‌‌ها استفاده از متد setinterval است. در ادامه به مثالی در این زمینه می‌‌‌پردازیم:
قطعه کد زیر را در نظر بگیرید:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setInterval() Method</h2>
<p id="demo"></p>
<script>
setInterval(myTimer, 1000);
function myTimer() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
</script>
</body>
</html>
با اجرا کردن کد بالا می‌‌‌‌توانید در هر زمان، ساعت دقیق سیستم خود را مشاهده کنید. اولین پارامتر، myTimer تابعی است که باید اجرا شود و پارامتر دوم طول فاصله زمانی بین هر اجرا را نشان می دهد که در اینجا 1000 میلی ثانیه یا همان 1 ثانیه است.
این مثال تابعی به نام myTimer را هر ثانیه یک بار مانند ساعت دیجیتال اجرا می‌کند :
The Window Object
The setInterval() Method
00 : 00 : 00 AM
متد setinterval به صورت مداوم و با تنظیم فاصله زمانی دلخواه، میتواند یک عمل را تکرار کند مگر اینکه برای توقف آن دستوری دهید.
متد setinterval در جاوا اسکریپت در مرورگرهای اینترنتی رایج مانند گوگل کروم و فایر فاکس پشتیبانی میشود.
به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setInterval() Methods</h2>
<p>In this example, the setInterval() method executes the setColor() function once every 1000 milliseconds
to toggle between two background colors.</p>
<script>
myInterval = setInterval(setColor, 1000);
function setColor() {
let x = document.body;
x.style.backgroundColor = x.style.backgroundColor == "yellow" ? "blue" : "yellow";
}
</script>
</body>
</html>
در این مثال تابع صفحه‌ی خروجی کد را به فاصله‌ی 1 ثانیه پس از اجرا به رنگ‌های دلخواه زرد و آبی درمی‌آورد و هر کدام 1 ثانیه روی صفحه می‌مانند.
The Window Object
The setInterval() Methods
In this example, the setInterval() method executes the setColor() function once every 1000 milliseconds to toggle between two background colors.
The Window Object
The setInterval() Methods
In this example, the setInterval() method executes the setColor() function once every 1000 milliseconds to toggle between two background colors.
متد setTimeout در جاوا اسکریپت
متد setTimeout برای تاخیر در اجرای دستور برای مدت زمان مشخص استفاده میشود. برای استفاده از این متد باید دو پارامتر را در اختیار کد قرار دهید پارامتر اول تابعی است که می‌‌‌‌‌خواهید اجرا شود و پارامتر دوم مدت زمان به تاخیر انداختن اجرای تابع ( بر حسب میلی ثانیه ) است.
مثال ساعت دیجیتال را که با متد setinterval اجرا کردیم می‌‌‌‌‌توانیم با متد setTimeout نیز اجرا کنیم :
<!DOCTYPE html>
<html>
<body onload="startTime()">
<h1>The Window Object</h1>
<h2>The setTimeout Method</h2>
<p id="demo"></p>
<script>
function startTime() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
setTimeout(function() {startTime()}, 1000);
}
</script>
</body>
</html>
خروجی:
The Window Object
The setTimeout Method
00 : 00 : 00 AM
به مثال زیر توجه کنید:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Method</h2>
<p>Wait 5 seconds for the greeting:</p>
<h2 id="demo"></h2>
<script>
const myTimeout = setTimeout(myGreeting, 5000);
function myGreeting() {
document.getElementById("demo").innerHTML = "Happy New Year!"
}
</script>
</body>
</html>
در این مثال تابع "تبریک سال نو" پس از 5 ثانیه تاخیر اجرا میشود و خروجی آن در مرورگر گوگل کروم به شکل زیر خواهد بود:
The Window Object
The setTimeout() Method
Wait 5 seconds for the greeting:
Happy New Year!
چند مثال دیگر را بررسی می‌کنیم:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Method</h2>
<p>Click the button. Wait 3 seconds for alert "Hello".</p>
<button onclick="myFunction()">Try it</button>
<script>
let timeout;
function myFunction() {
timeout = setTimeout(alertFunc, 3000);
}
function alertFunc() {
alert("Hello!");
}
</script>
</body>
</html>
در مثال بالا تابع alertFunc پس از اجرا شدن در گوگل کروم و بعد از اینکه شما روی دکمه‌ی Try it کلیک کنید با 3 ثانیه تاخیر نوتیفیکیشنی با محتوای " Hello! "به مرورگر شما ارسال می‌کند.
The Window Object
The setTimeout() Method
Click the button. Wait 3 seconds for alert "Hello".
Try it
در مثال بعدی تابع، بعد از اینکه روی دکمه‌ی Open "myWindow" کلیک کنید، پنجره مرورگر جدیدی ( با ابعاد مشخص شده‌ای ) باز می‌کند و پس از 3 ثانیه آن را می‌بندد.
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Method</h2>
<p>Click the button to open a new window and close the window after three seconds (3000 milliseconds)</p>
<button onclick="openWin()">Open "myWindow"</button>
<script>
function openWin() {
const myWindow = window.open("", "", "width=200, height=100");
setTimeout(function() {myWindow.close()}, 3000);
}
</script>
</body>
</html>
The Window Object
The setTimeout() Method
Click the button to open a new window and close the window after three seconds (3000 milliseconds)
Open "myWindow"
به مثال بعد توجه کنید:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Method</h2>
<p>The input field will tell you when two, four, and six seconds have passed.</p>
<input type="text" id="txt">
<script>
let x = document.getElementById("txt");
setTimeout(function(){ x.value="2 seconds" }, 2000);
setTimeout(function(){ x.value="4 seconds" }, 4000);
setTimeout(function(){ x.value="6 seconds" }, 6000);
</script>
</body>
</html>
در این مثال تابع پس از اجرا شدن در زمان‌های مشخص شده‌ی 2 ، 4 و 6 ثانیه به ترتیب پیغام‌های " 2 seconds " ، "4 seconds" و "6 seconds" را نمایش میدهد.
The Window Object
The setTimeout() Method
The input field will tell you when two, four, and six seconds have passed.
مثال آخر:
<!DOCTYPE html>
<html>
<body>
<h1>The Window Object</h1>
<h2>The setTimeout() Methods</h2>
<button onclick="startCount()">Start count!</button>
<input type="text" id="demo">
<p>Click on "Start count!" to start the timer. The input field will count forever, starting at 0.</p>
<script>
let counter = 0;
let timeout;
let timer_on = 0;
function timedCount() {
document.getElementById("demo").value = counter;
counter++;
timeout = setTimeout(timedCount, 1000);
}
function startCount() {
if (!timer_on) {
timer_on = 1;
timedCount();
}
}
</script>
</body>
</html>
در این مثال تابع بعد از اینکه روی دکمه‌ی Start count! کلیک شود شروع به شمردن اعداد از عدد 0 به بعد می‌کند.
خروجی:
The Window Object
The setTimeout() Methods
Start count!
Click on "Start count!" to start the timer. The input field will count forever, starting at 0.
