با عرض سلام خدمت کاربران محترم سایت پی وی لرن. در جلسه قبل این آموزش کار با پنجره Alert در جاوا اسکریپت را توضیح دادیم در این جلسه قصد داریم تا با رویداد های زمانی در جاوا اسکریپت JavaScript و تابع setTimeout در جاوا اسکریپت آشنا شویم.
مفهوم رویداد های زمانی Timing Events
کد های جاوا اسکریت می تواند در فاصله های زمانی معینی اجرا و تکرار شوند.
این فواصل زمانی، رویدادهای زمانی (Timing Events) نام دارد.
رویداد های زمانی
شی window این ماکان را به ما می دهد تا کد را در فواصل زمانی مشخص اجرا کنیم.
دو متد یا تابع اصلی برای این کار در پایین آورده شده است:
- (setTimeout(function, milliseconds
یک تابع را بعد از اتمام زمان مشخص شده اجرا می کند - (setInterval(function, milliseconds
مانند تابع setTimeout عمل می کند اما کد را مدام تکرار می کند.
تابع setTimeout در جاوا اسکریپت
ساختار دستور:
مثال :
| window.setTimeout(function, milliseconds); |
تابع setTimeout در جاوا اسکریپت می تواند بدون پیشوند window فراخوانی شود.
اولین پارامتر تابعی است که باید اجرا شود.
دومین پارامتر زمان سپری شده قبل از اجرا را مشخص می کند.
در مثال زیر بعد از کلیک کردن دکمه، پیام Hello بعد از ۳ ثانیه نمایش داده می شود:
مثال : تابع setTimeout
| <button onclick="setTimeout(myFunction, 3000)">Try it</button> <script> function myFunction() { alert('Hello'); } </script> |
متوقف کردن اجرای تابع
از متد ()clearTimeout برای متوقف کردن تابع قبل از اجرا استفاده می کنیم.
ساختار دستور:
مثال :
| window.clearTimeout(timeoutVariable) |
متغیر timeoutVariable به یک تابع setTimeout اشاره می کند.
مثال:
مثال : متوقف کردن اجرای تابع
| <button onclick="myVar = setTimeout(myFunction, 3000)">Try it</button> <button onclick="clearTimeout(myVar)">Stop it</button> |
تابع setInterval در جاوا اسکریپت
تابع setInterval در جاوا اسکریپت یک تابع را در فاصله های زمانی معینی که ما آن را مشخص می کنیم، اجرا می کند.
ساختار دستور:
مثال :
| window.setInterval(function, milliseconds); |
این تابع را نیز می توان بدون پیشوند window اجرا کرد.
اولین پارامتر تابعی است که باید اجرا شود.
دومین پارامتر فاصله زمانی را مشخص می کند.
در مثال زیر تابع myTmer بعد از ۱ ثانیه اجرا شده و هر ۱ ثانیه دوباره اجرا می شود:
مثال : متد setInterval
| var myVar = setInterval(myTimer, 1000); function myTimer() { var d = new Date(); document.getElementById("demo").innerHTML = d.toLocaleTimeString(); } |
برای توقف اجرای این تابع نیز از متد ()window.clearInvertal استفاده می کنیم.
در مثال زیر بعد از کلیک دکمه Stop time اجرای تابع متوقف می شود:
مثال : متوقف کردن setInterval
| <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> |
جلسه آموزش رویداد های زمانی در جاوا اسکریپت JavaScript نیز به پایان رسید.
در جلسه بعد به آموزش کوکی ها در جاوا اسکریپت خواهیم پرداخت. با ما همراه باشید.
فروشگاه
فیلم های آموزشی
کتاب های آموزشی
مقالات آموزشی
وردپرس
