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