کار با تایمرها یا Timer در جاوااسکریپت
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تایمرها یا Timers در جاوااسکریپت با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
تایمرها یا Timers در جاوااسکریپت
یه چیزی در جاوااسکریپت داریم به اسم Timing Events ( در لغت به فارسی میشه زمانبندی رویدادها ) ولی خب در کل منظور از این زمانبندی رویدادها، یعنی اجرای یسری دستورات مشخص در یک بازه ی زمانی مشخص.
بفرض مثال ما میخوایم بعد از ۱۰ثانیه در صفحه یک باکس پیغام نمایش داده بشه یا حالا هر کار دیگه، یا شاید بخوایم کاری کنیم که یه دستور در بازه زمانی مشخص ( مثلا هر ۵ ثانیه یکبار ) اجرا بشه، پس در این مواقع میتونیم از این جریان Timing Events استفاده نماییم.
Free-Learn
انواع زمانبندی در جاوااسکریپت
ما ۲ نمونه زمانبندی ( یا روش کار با بازه زمانی ) داریم که این روش ها به شرح زیر می باشند :
- setTimeout » اجرای یک کد پس از بازه زمانی مشخص
- setInterval » اجرای یک کد بطور مداوم در یک بازه زمانی مشخص
یعنی اگه خواستیم بگیم مثلا پس از ۱۰ ثانیه فلان کد یا حالاهرچیزی اجرا بشه باید از setTimeout
استفاده نماییم و اگه بخوایم بطور مداوم مثلا هر ۵ ثانیه یکبار کدی اجرا بشه باید از setInterval
استفاده نماییم.
Free-Learn
متد setTimeout در جاوااسکریپت
خب گفتیم با استفاده از این متد میتونیم کاری رو بعد از مدت زمان مشخصی اجرا کنیم، پس دیگه بدونید این متد برای اجرای یک تابع پس از یک مدت زمان مشخص می باشد.
شکل کلی متد setTimeout :
1 |
setTimeout( Function , Time_Wit_Millisecond ) |
- Function : اون کد یا برنامه یا تابعی که قراره اجرا بشه
- Time_Wit_Millisecond : مدت زمان به میلی ثانیه که باید سپری شود تا تابع اجرا شود
مثال شماره ۱ : بعد از ۳ ثانیه یه پیغام در صفحه ظاهر میشه
1 2 3 4 5 6 7 8 9 |
<script> function MyMessage(){ alert("سلام خوبی؟"); } setTimeout(MyMessage, 3000); </script> |
مثال شماره ۲ :تغییر مسیر صفحه بعد از ۲ ثانیه به صفحه دیگر
1 2 3 4 5 6 7 8 9 |
<script> function MySite(){ window.location.href="https://free-learn.ir/"; } setTimeout(MySite, 2000); </script> |
Free-Learn
متد setInterval در جاوااسکریپت
با استفاده از این متد میتونیم یک تابع ( تکه کد یا برنامه ) رو در مدت زمان مشخصی بطور مداوم اجرا کنیم، مثلا یه تابع رو هر ۵ثانیه یکبار در صفحه اجرا کنیم.
شکل کلی متد setInterval :
1 |
setInterval( Function , Time_Wit_Millisecond ) |
- Function : اون کد یا برنامه یا تابعی که قراره اجرا بشه
- Time_Wit_Millisecond : فاصله زمانی بین اجرا شدن تابع – زمان با میلی ثانیه
مثال شماره ۱ : هر ۲ ثانیه یکبار کلمه ” فری لرن ” در صفحه چاپ میشود
1 2 3 4 5 6 7 8 9 10 11 |
<script> var result = document.getElementById("Result"); function MyMessage(){ result.innerHTML = result.innerHTML + "فری لرن" + "<br>"; } setInterval(MyMessage, 2000); </script> |
مثال شماره ۲ : رفرش شدن صفحه در هر ۵ ثانیه یکبار بصورت خودکار
1 2 3 4 5 6 7 8 9 |
<script> function MyReload(){ location.reload(); } setInterval(MyReload, 5000); </script> |
مثال شماره ۳ : نمایش زنده ساعت
1 2 3 4 5 6 7 8 9 10 11 12 |
<script> var result = document.getElementById("Result"); function MyTime(){ var MyDate = new Date(); result.innerHTML = MyDate.toLocaleTimeString(); } setInterval(MyTime, 1000); </script> |
Free-Learn
نحوه متوقف کردن setTimeout
خب فرض میکنیم ما زمانبندی رو با استفاده از setTimeout
ایجاد کردیم، حال ممکنه بعدش بخوایم این زمانبندی رو از بین ببریم یا حذفش کنیم، باید چکار کرد!؟ به راحتی و با استفاده از متد clearTimeout
میتونیم تایمر رو Stop یا متوقف کنیم.
شکل کلی متد ()clearTimeout :
1 |
clearTimeout( Timer_Variable ) |
- Timer_Variable : نام اون متغیری که زمانبندی رو داخلش نگهداری میکنه
مثال : در مثال زیر بعد از ۵ ثانیه یه پیغام نمایش داده خواهد شد، ولی خب میشه با کلیک بروی دکمه از نمایش پیغام جلوگیری کرد ( یعنی در واقع متوقف کردن تایمر )
1 2 3 4 5 6 7 8 9 10 11 |
<button onclick="clearTimeout(MyTimer);">کلیک کنید</button> <script> function MyMessage(){ alert("سلام خوبی؟"); } var MyTimer = setTimeout(MyMessage, 5000); </script> |
Free-Learn
نحوه متوقف کردن setInterval
با استفاده از این متد نیز میتونیم اجرای متد setInterval
رو Stop یا متوقف کنیم.
شکل کلی متد ()clearInterval :
1 |
clearInterval( Timer_Variable ) |
- Timer_Variable : نام اون متغیری که زمانبندی رو داخلش نگهداری میکنه
مثال : در مثال زیر قراره هر ۲ ثانیه یکبار کلمه فری لرن در صفحه چاپ بشه، ولی خب با کلیک با بروی دکمه میخوایم تایمر رو متوقف کنیم.
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<button onclick="clearInterval(MyTimer);">متوقفش کن</button> <script> var result = document.getElementById("Result"); function MyMessage(){ result.innerHTML = result.innerHTML + "فری لرن" + "<br>"; } var MyTimer = setInterval(MyMessage, 2000); </script> |
Free-Learn
مثال های بیشتر
مثال شماره ۱ : ایجاد یک تایمر کم شونده ( تایمر معکوس یا Countdown Timer ) – نمونه اول
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
<script> // تاریخ وساعتی که قراره بهش برسیم var countDownDate = new Date("Jan 5, 2025 15:00:00").getTime(); var x = setInterval(function() { // دریافت تاریخ و ساعت امروز var now = new Date().getTime(); // بدست آوردن فاصله بین تاریخ امروز تا تاریخی که قراره بهش برسیم var distance = countDownDate - now; // محاسبات روز ، ساعت ، دقیقه و ثانیه var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000); // چاپ کردن تایمر در خروجی document.getElementById("Result").innerHTML = days + "روز " + hours + "ساعت " + minutes + "دقیقه " + seconds + "ثانیه "; // اگه به تاریخی که خواستیم رسیده بودیم پیغام میده که فرصت تمام شده if (distance < 0) { clearInterval(x); document.getElementById("Result").innerHTML = "فرصت تمام شده"; } }, 1000); </script> |
مثال شماره ۲ : ایجاد یک تایمر کم شونده ( تایمر معکوس یا Countdown Timer ) – نمونه دوم
1 2 3 4 5 6 7 8 9 |
<div class="container"> <h1>زمان باقی مانده تا شروع مسابقه</h1> <ul> <li><span id="days"></span>روز</li> <li><span id="hours"></span>ساعت</li> <li><span id="minutes"></span>دقیقه</li> <li><span id="seconds"></span>ثانیه</li> </ul> </div> |