خانه آموزش زبان جاوااسکریپت آموزش JS پیشرفته کار با تایمرها یا Timers در جاوااسکریپت

کار با تایمرها یا Timers در جاوااسکریپت

توسط

۱۳۹۹-۰۹-۰۶

کار با تایمرها یا Timer در جاوااسکریپت

سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش کار با تایمرها یا Timers در جاوااسکریپت با من همراه باشید.

کار با تایمرها یا Timers در جاوااسکریپت

Free-Learn

آنچه در این جلسه میخوانید :

1 تایمرها یا Timers در جاوااسکریپت
2 انواع زمانبندی در جاوااسکریپت
3 متد setTimeout در جاوااسکریپت
4 متد setInterval در جاوااسکریپت
5 نحوه متوقف کردن setTimeout
6 نحوه متوقف کردن setInterval
7 مثال های بیشتر

تایمرها یا Timers در جاوااسکریپت

یه چیزی در جاوااسکریپت داریم به اسم Timing Events ( در لغت به فارسی میشه زمانبندی رویدادها ) ولی خب در کل منظور از این زمانبندی رویدادها، یعنی اجرای یسری دستورات مشخص در یک بازه ی زمانی مشخص.

بفرض مثال ما میخوایم بعد از ۱۰ثانیه در صفحه یک باکس پیغام نمایش داده بشه یا حالا هر کار دیگه، یا شاید بخوایم کاری کنیم که یه دستور در بازه زمانی مشخص ( مثلا هر ۵ ثانیه یکبار ) اجرا بشه، پس در این مواقع میتونیم از این جریان Timing Events استفاده نماییم.

Free-Learn

انواع زمانبندی در جاوااسکریپت

ما ۲ نمونه زمانبندی ( یا روش کار با بازه زمانی ) داریم که این روش ها به شرح زیر می باشند :

setTimeout » اجرای یک کد پس از بازه زمانی مشخص
setInterval » اجرای یک کد بطور مداوم در یک بازه زمانی مشخص

یعنی اگه خواستیم بگیم مثلا پس از ۱۰ ثانیه فلان کد یا حالاهرچیزی اجرا بشه باید از setTimeout استفاده نماییم و اگه بخوایم بطور مداوم مثلا هر ۵ ثانیه یکبار کدی اجرا بشه باید از setInterval استفاده نماییم.

Free-Learn

متد setTimeout در جاوااسکریپت

خب گفتیم با استفاده از این متد میتونیم کاری رو بعد از مدت زمان مشخصی اجرا کنیم، پس دیگه بدونید این متد برای اجرای یک تابع پس از یک مدت زمان مشخص می باشد.

شکل کلی متد setTimeout :

setTimeout( Function , Time_Wit_Millisecond )

1	setTimeout( Function , Time_Wit_Millisecond )

Function : اون کد یا برنامه یا تابعی که قراره اجرا بشه
Time_Wit_Millisecond : مدت زمان به میلی ثانیه که باید سپری شود تا تابع اجرا شود

هر ۱۰۰۰ میلی ثانیه ای ۱ ثانیه می باشد.

مثال شماره ۱ : بعد از ۳ ثانیه یه پیغام در صفحه ظاهر میشه

<script>

function MyMessage(){
 alert("سلام خوبی؟");
}

setTimeout(MyMessage, 3000);

</script>

function MyMessage(){

alert("سلام خوبی؟");

}

setTimeout(MyMessage, 3000);

</script>

امتحان کنید

مثال شماره ۲ :تغییر مسیر صفحه بعد از ۲ ثانیه به صفحه دیگر

<script>

function MySite(){
 window.location.href="https://free-learn.ir/";
}

setTimeout(MySite, 2000);

</script>

function MySite(){

window.location.href="https://free-learn.ir/";

}

setTimeout(MySite, 2000);

</script>

امتحان کنید

Free-Learn

متد setInterval در جاوااسکریپت

با استفاده از این متد میتونیم یک تابع ( تکه کد یا برنامه ) رو در مدت زمان مشخصی بطور مداوم اجرا کنیم، مثلا یه تابع رو هر ۵ثانیه یکبار در صفحه اجرا کنیم.

شکل کلی متد setInterval :

setInterval( Function , Time_Wit_Millisecond )

1	setInterval( Function , Time_Wit_Millisecond )

Function : اون کد یا برنامه یا تابعی که قراره اجرا بشه
Time_Wit_Millisecond : فاصله زمانی بین اجرا شدن تابع – زمان با میلی ثانیه

هر ۱۰۰۰ میلی ثانیه ای ۱ ثانیه می باشد.

مثال شماره ۱ : هر ۲ ثانیه یکبار کلمه ” فری لرن ” در صفحه چاپ میشود

<script>

var result = document.getElementById("Result");

function MyMessage(){
 result.innerHTML = result.innerHTML + "فری لرن" + "<br>";
}

setInterval(MyMessage, 2000);

</script>

var result = document.getElementById("Result");

function MyMessage(){

result.innerHTML = result.innerHTML + "فری لرن" + "<br>";

}

setInterval(MyMessage, 2000);

</script>

امتحان کنید

مثال شماره ۲ : رفرش شدن صفحه در هر ۵ ثانیه یکبار بصورت خودکار

<script>

function MyReload(){
 location.reload();
}

setInterval(MyReload, 5000);

</script>

function MyReload(){

location.reload();

}

setInterval(MyReload, 5000);

</script>

امتحان کنید

مثال شماره ۳ : نمایش زنده ساعت

<script>

var result = document.getElementById("Result");

function MyTime(){
 var MyDate = new Date();
 result.innerHTML = MyDate.toLocaleTimeString();
}

setInterval(MyTime, 1000);

</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 :

clearTimeout( Timer_Variable )

1	clearTimeout( Timer_Variable )

Timer_Variable : نام اون متغیری که زمانبندی رو داخلش نگهداری میکنه

مثال : در مثال زیر بعد از ۵ ثانیه یه پیغام نمایش داده خواهد شد، ولی خب میشه با کلیک بروی دکمه از نمایش پیغام جلوگیری کرد ( یعنی در واقع متوقف کردن تایمر )

<button onclick="clearTimeout(MyTimer);">کلیک کنید</button>

<script>

function MyMessage(){
 alert("سلام خوبی؟");
}

var MyTimer = setTimeout(MyMessage, 5000);

</script>

function MyMessage(){

alert("سلام خوبی؟");

}

var MyTimer = setTimeout(MyMessage, 5000);

</script>

امتحان کنید

Free-Learn

نحوه متوقف کردن setInterval

با استفاده از این متد نیز میتونیم اجرای متد setInterval رو Stop یا متوقف کنیم.

شکل کلی متد ()clearInterval :

clearInterval( Timer_Variable )

1	clearInterval( Timer_Variable )

Timer_Variable : نام اون متغیری که زمانبندی رو داخلش نگهداری میکنه

مثال : در مثال زیر قراره هر ۲ ثانیه یکبار کلمه فری لرن در صفحه چاپ بشه، ولی خب با کلیک با بروی دکمه میخوایم تایمر رو متوقف کنیم.

<button onclick="clearInterval(MyTimer);">متوقفش کن</button>

<script>

var result = document.getElementById("Result");

function MyMessage(){
 result.innerHTML = result.innerHTML + "فری لرن" + "<br>";
}

var MyTimer = setInterval(MyMessage, 2000);

</script>

<button onclick="clearInterval(MyTimer);">متوقفش کن</button>

var result = document.getElementById("Result");

function MyMessage(){

result.innerHTML = result.innerHTML + "فری لرن" + "<br>";

}

var MyTimer = setInterval(MyMessage, 2000);

</script>

امتحان کنید

Free-Learn

مثال های بیشتر

مثال شماره ۱ : ایجاد یک تایمر کم شونده ( تایمر معکوس یا Countdown Timer ) – نمونه اول

<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>

// تاریخ وساعتی که قراره بهش برسیم

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 ) – نمونه دوم

<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>

<h1>زمان باقی مانده تا شروع مسابقه</h1>

<ul>

<li><span id="minutes"></span>دقیقه</li>

<li><span id="seconds"></span>ثانیه</li>

</ul>

</div>

امتحان کنید

Free-Learn

دریافت PDF یا پرینت این مطلب