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

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

توسط

۱۳۹۹-۰۹-۰۶

این آموزش در تاریخ ۱۴۰۱/۰۴/۰۵ آپدیت شده است.

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

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

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

Free-Learn

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

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

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

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

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

Free-Learn

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

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

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

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

Free-Learn

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

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

شکل کلی متد setTimeout :

setTimeout( Function_Name , Time_Wit_Millisecond )

1	setTimeout( Function_Name , Time_Wit_Millisecond )

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

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

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

<script>

// تابعی که قراره اجرا بشه
function MyMessage(){
 alert("سلام خوبی؟");
}

// تنظیم زمانبندی با 3 ثانیه
setTimeout(MyMessage, 3000);

</script>

// تابعی که قراره اجرا بشه

function MyMessage(){

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

}

// تنظیم زمانبندی با 3 ثانیه

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_Name , Time_Wit_Millisecond )

1	setInterval( Function_Name , Time_Wit_Millisecond )

Function_Name : اون کد یا برنامه یا تابعی که قراره اجرا بشه
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>

function ShowTime(){
 ....
}

setInterval(ShowTime, 10);

</script>

function ShowTime(){

....

}

setInterval(ShowTime, 10);

</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 second = 1000;
var minute = second * 60;
var hour = minute * 60;
var day = hour * 24;

// اون تاریخی که قراره بهش برسیم
let countDown = new Date('Sep 30, 2024 00:00:00').getTime();

function MyRacing() {
let nowDate = new Date().getTime(),
distance = countDown - nowDate;
document.getElementById('days').innerText = Math.floor(distance / (day)),
document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),
document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),
document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);
	  
// وقتی تاریخ و زمان گذشته بود
if (distance < 0) {
 clearInterval(MyTimer);
 alert("مسابقه شروع شده است");
}

}

MyTimer = setInterval( MyRacing , 1000);

</script>

var second = 1000;

var minute = second * 60;

var hour = minute * 60;

var day = hour * 24;

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

let countDown = new Date('Sep 30, 2024 00:00:00').getTime();

function MyRacing() {

let nowDate = new Date().getTime(),

distance = countDown - nowDate;

document.getElementById('days').innerText = Math.floor(distance / (day)),

document.getElementById('hours').innerText = Math.floor((distance % (day)) / (hour)),

document.getElementById('minutes').innerText = Math.floor((distance % (hour)) / (minute)),

document.getElementById('seconds').innerText = Math.floor((distance % (minute)) / second);

// وقتی تاریخ و زمان گذشته بود

if (distance < 0) {

clearInterval(MyTimer);

alert("مسابقه شروع شده است");

}

MyTimer = setInterval( MyRacing , 1000);

</script>

امتحان کنید

مثال شماره ۲ : با کلیک بروی یک دکمه عدد اضافه میشه و با کلیک بروی دکمه دیگه کم میشه

function CountUp(){
totalSeconds++;
if( totalSeconds < 10 ){
 totalSeconds = "0" + totalSeconds;
}
if( totalSeconds > 0 ){
 document.getElementById("CD").disabled = "";
}
secondsLabel.innerHTML = totalSeconds;
}

function CountUp(){

totalSeconds++;

if( totalSeconds < 10 ){

totalSeconds = "0" + totalSeconds;

}

if( totalSeconds > 0 ){

document.getElementById("CD").disabled = "";

}

secondsLabel.innerHTML = totalSeconds;

}

امتحان کنید

مثال شماره ۳ : ایجاد یک تایمر اضافه شونده ( ثانیه و دقیقه و ساعت )

function countUpTimer() {
var Result = document.getElementById("count_up_timer");
totalSeconds++;
var hour = Math.floor(totalSeconds / 3600);
var minute = Math.floor((totalSeconds - hour * 3600) / 60);
var seconds = totalSeconds - (hour * 3600 + minute * 60);
if( hour < 10 ){
 hour = "0" + hour;
} 
if( minute < 10 ){
 minute = "0" + minute;
}
if( seconds < 10 ){
 seconds = "0" + seconds;
} 
Result.innerHTML = hour + ":" + minute + ":" + seconds;
}

function countUpTimer() {

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

totalSeconds++;

var hour = Math.floor(totalSeconds / 3600);

var minute = Math.floor((totalSeconds - hour * 3600) / 60);

var seconds = totalSeconds - (hour * 3600 + minute * 60);

if( hour < 10 ){

hour = "0" + hour;

}

if( minute < 10 ){

minute = "0" + minute;

}

if( seconds < 10 ){

seconds = "0" + seconds;

}

Result.innerHTML = hour + ":" + minute + ":" + seconds;

}

امتحان کنید

Free-Learn

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

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

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

Free-Learn

آموزش پیشرفته جاوااسکریپت

کار با توابع یا Functions در جاوا اسکریپت

کار با اشیاء یا Objects در جاوااسکریپت

آموزش مدیریت خطاها در جاوا اسکریپت

کار با آرایه ها یا Arrays در جاوااسکریپت

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

کار با تاریخ و ساعت در جاوااسکریپت

کار با متدهای گرفتنی یا Get در تاریخ و ساعت

کار با متدهای ست کردنی یا Set در تاریخ و ساعت

آموزش صفت Border در HTML