آموزش جاوا اسکریپت – تایمر در جاوا اسکریپت

در این بخش از سری آموزش جاوا اسکریپت قصد داریم درباره توابع تایمر در جاوا اسکریپت صحبت کنیم.

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

یک تایمر (زمان سنچ) تابعی است که به ما امکان اجرای یک تابع در زمان مشخص را می دهد.

با استفاده از تایمرها می توانید کدها را با یک وقفه اجرا کنید بنابراین زمانی که رویداد رخ می دهد یا صغحه لود می شود, اجرا نمی شود.

برای مثال, می توانید از تایمر برای تغییر بنرهای تبلیغاتی در وبسایت خود با فاصله زمانی منظرم یا نمایش یک ساعت در زمان واقعی (real-time) و غیره… استفاده کنید.

دو تابع تایمر در جاوا اسکریپت وجود دارد : setTimeout() و setInterval()

بخش زیر به شما نحوه ساخت تایمر برای ایجاد وقفه در اجرای کد نشان می دهد.

اجرای کد بعد از یک وقفه (delay)

تابع setTimeout() برای اجرای یک تابع یا تکه ای از کد فقط در بازه زمانی خاص استفاده می شود و سینتکس ساده آن setTimeout(function, milliseconds) می باشد.

این تابع دو پارامتر دریافت می کند.

Function –یک تابع برای اجرا است
Delay –یک پارامتر بر حسب میلی ثانیه به منظور انتظار قبل از اجرای تابع است (۱ ثانیه = ۱۰۰۰ میلی ثانیه)

<script>
function myFunction() {
    alert('Hello World!');
}
</script>
 
<button onclick="setTimeout(myFunction, 2000)">Click Me</button>

function myFunction() {

alert('Hello World!');

}

</script>

<button onclick="setTimeout(myFunction, 2000)">Click Me</button>

مثال بالا یک پیام alert را بعد از ۲ ثانیه کلیک روی دکمه نشان می دهد.

نکته: اگر پارامتر delay را حذف یا مشخص نکنید, بطور پیش فرض مقدار ۰ خواهد بود به این معنا که تابع مشخص شده بلافاصله یا هر چه زودتر ممکن باشد, اجرا خواهد شد.

اجرای کد در بازه زمانی منظم

از تابع setInterval() می توانید برای اجرای یک تابع یا بخش خاصی از کد بصورت مکرر در بازه زمانی ثابت و منظم استفاده کنید و سینتکس آن setInterval(function, milliseconds) می باشد.

این تابع دو پارامتر را می پذیرد:

Function –یک تابع برای اجرا است
Interval –یک پارامتر بر حسب میلی ثانیه به منظور انتظار قبل از اجرای تابع است (۱ ثانیه = ۱۰۰۰ میلی ثانیه)

<script>
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: <span id="clock"></span></p>

function showTime() {

var d = new Date();

document.getElementById("clock").innerHTML = d.toLocaleTimeString();

}

setInterval(showTime, 1000);

</script>

<p>The current time on your computer is: <span id="clock"></span></p>

مثال بالا تابع showTime() را بصورت مکرر هر ۱ ثانیه اجرا می کند. این تابع زمان فعلی روی سیستم کامپیوتر شما را دریافت و در مرورگر نمایش می دهد.

متوقف کردن اجرای کد یا لغو تایمر

هر دو متد setTimeout() و setInterval() یک ID یکتا (مقدار عددی مثبت) برای شناسایی تایمر ساخته شده توسط این متدها را برگشت می دهند.

این ID می تواند برای غیرفعال یا پاک کردن تایمر و متوقف کردن اجرای کد پشت صحنه استفاده می شود.

پاک کردن یک تایمر می تواند توسط دو تابع clearTimeout() و clearInterval() استفاده شود.

تابع clearTimeout() یک پارامتر را که همان ID است دریافت و تایمر اختصاص داده شده setTimeout() به آن را پاک می کند.

<script>
var timeoutID;
 
function delayedAlert() {
  timeoutID = setTimeout(showAlert, 2000);
}
 
function showAlert() {
  alert('This is a JavaScript alert box.');
}
 
function clearAlert() {
  clearTimeout(timeoutID);
}
</script>
 
<button onclick="delayedAlert();">Show Alert After Two Seconds</button>
 
<button onclick="clearAlert();">Cancel Alert Before It Display</button>

var timeoutID;

function delayedAlert() {

timeoutID = setTimeout(showAlert, 2000);

}

function showAlert() {

alert('This is a JavaScript alert box.');

}

function clearAlert() {

clearTimeout(timeoutID);

}

</script>

<button onclick="delayedAlert();">Show Alert After Two Seconds</button>

<button onclick="clearAlert();">Cancel Alert Before It Display</button>

مشابه آن, تابع clearInterval() یک پارامتر را که همان ID است دریافت و تایمر اختصاص داده شده setInterval() به آن را پاک می کند.

<script>
var intervalID;
 
function showTime() {
    var d = new Date();
    document.getElementById("clock").innerHTML = d.toLocaleTimeString();
}
 
function stopClock() {
    clearInterval(intervalID);
}
 
var intervalID = setInterval(showTime, 1000);
</script>
 
<p>The current time on your computer is: <span id="clock"></span></p>
 
<button onclick="stopClock();">Stop Clock</button>

var intervalID;

function showTime() {

var d = new Date();

document.getElementById("clock").innerHTML = d.toLocaleTimeString();

}

function stopClock() {

clearInterval(intervalID);

}

var intervalID = setInterval(showTime, 1000);

</script>

<p>The current time on your computer is: <span id="clock"></span></p>

<button onclick="stopClock();">Stop Clock</button>

نکته: از لحاظ تکنیکی می توانید دو تابع clearTimeout() و clearInterval() را به جای هم استفاده کنید. به هرحال, برای راحتی و توسعه بهتر کد بهتر است از اینکار خودداری کنید.

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

هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .

موفق باشید.

لغو پاسخ

رضا جعفري ۷ دی ۱۳۹۹

سلام ممنون از شما
من براي براي كامپيوتر يه ساعت ورزشي ميخوام اما هرچي توي مت گشتم موردي پيدا نكردم ، موردي كه مثل تاباتا تايمر بشه ازش بدون محدوديت استفاده كرد.ديگه نااميد شدم گفتم خودم بنويسمش، ولي راستش براي منيكه از برنامه نويسي چيزي نميدونم خيلي خيلي سخته البته شايد هم بتونم نميدونم.
لطفا كمك كنيد
ممنون

پاسخ
رضا ۲۷ آبان ۱۳۹۹

سلام . ممنون از آموزش تایمر . من برای محتواسازی یک تایمر طراحی کردم به صورت نوار پیمایشی ( دایره ای یا خطی ) . کاهش یا افزایش رنگ نوار را چطور میشه با درصد هم نمایش داد . اگر کد آن را لطف کنید ممنون

پاسخ

حسن شفیعی ۲۷ آبان ۱۳۹۹

سلام. بفرمایید از کدهای این مثال استفاده کنید :
https://jsfiddle.net/akamq3c7/1/
موفق باشید.

پاسخ

amin bm ۱۶ تیر ۱۳۹۹

سلام وقت بخیر
بنده یک وب سایت وردپرسی دارم که داخل صفحه اصلیش ۳ تا اسلایدر گذاشتم که به محض کلیک روی صفحه همشون با هم لود و اجرا میشن. حالا من میخواستم بپرسم با چه کدی میشه کاری کرد که هر اسلایدر زمانی لود و فعال بشه که اسکرول صفحه بهش میرسه؟

پاسخ

حسن شفیعی ۱۶ تیر ۱۳۹۹

سلام. ممنون.
از متد scrollTop در جی کوئری استفاده کنید و مشخص کنید که اسلایدر از نقطه صفر صفحه چند پیکسل فاصله دارد و اگر به این فاصله رسید که داخل متد گفته شده تعیین می کنید، تابع مربوط به اسلایدر را فراخوانی کنید.
موفق باشید.

پاسخ

یاشار ۲۹ خرداد ۱۳۹۹

اگه نمونه کدش رو دارید مثل بالایی بذارید و توضیح بدید

پاسخ

حسن شفیعی ۲۹ خرداد ۱۳۹۹

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

پاسخ

یاشار ۲۸ خرداد ۱۳۹۹

سلام مطالبتون عالی بود منم رشته ام نرم افزار هست ولی خیلی وقته سراغ کد و برنامه نرفتم و الانم کارم کفاشی هست
یه سوال
میخواستم یه کد بنویسم مثلابرا همین ثبت دیدگاه
چطوری یه کد بنویسم که مثلا تو زمان ۲میلی ثانیه ده تا رو ثبت دیدگاه کلیک بشه و ثبت کنه؟؟

پاسخ

حسن شفیعی ۲۹ خرداد ۱۳۹۹

سلام. خوشحالیم که مفید واقع شده.
باید داخل رویداد onClick یک متغییر بزارید به صورت count++ و داخل تایمر هم مشخص کنید اگر به عدد موردنظر رسید سابمیت انجام بشه.
موفق باشید.

پاسخ

یاشار ۲۹ خرداد ۱۳۹۹

اگه نمونه کدش رو دارید مثل بالایی بذارید و توضیح بدید

پاسخ
حسن شفیعی ۲۹ خرداد ۱۳۹۹

شرمنده کد نمونه رو ندارم میتونید طبق این راهنما و کمی تست کد مورد نظر رو بنویسید.

پاسخ

آموزش جاوا اسکریپت – تایمر در جاوا اسکریپت

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

اجرای کد بعد از یک وقفه (delay)

اجرای کد در بازه زمانی منظم

متوقف کردن اجرای کد یا لغو تایمر

لغو پاسخ

دوره آموزش ساخت دیجی کالا با php به همراه اپلیکیشن اندروید

آموزش ساخت ربات تلگرام با PHP (از پایه و پروژه محور)

دوره جامع آموزش طراحی سایت + پروژه قالب فروشگاه