JS Taymerlar
Funksiyani kechikish bilan ishga tushirish
JavaScript taymerlari funksiyani kechikishdan keyin yoki belgilangan oraliqlarda qayta-qayta ishga tushirish imkonini beradi.
Ikkita asosiy taymer funksiyasi — setTimeout() va setInterval().
| funksiyasi | Tavsif |
|---|---|
| setTimeout() | Kechiktirilgandan keyin funksiyani bir marta ishga tushiradi. |
| setInterval() | Funksiyani takroran ishga tushiradi. |
| clearTimeout() | Timeout’ni bekor qiladi. |
| clearInterval() | Intervalni to‘xtatadi. |
setTimeout() funksiyasi
setTimeout() funksiyasi funksiyaning kechikishdan so‘ng bir marta ishga tushishini rejalashtiradi.
Sintaksis
setTimeout(function, milliseconds);
Birinchi argument bajariladigan funksiyadir.
Ikkinchi dalil - millisekundlarda kechikish.
Bir soniya 1000 millisekundga teng.
Misol
Uch soniyadan so‘ng xabarni ko‘rsatish:
// Call a Timeout
setTimeout(myFunction, 3000);
// The callback function
function myFunction() {
myDisplayer("Hello!");
}
Eslatma
Function nomi funksiyaga uzatilsa, uni callback funksiyasi deyiladi.
Funksiyani uzatish
setTimeout()’ga faqat funksiya nomini uzating.
To‘g‘ri:
setTimeout(myFunction, 3000);
Noto‘g‘ri:
setTimeout(myFunction(), 3000);
Noto‘g‘ri misol myFunction()’ni darhol chaqiradi.
Keyin uning qaytariladigan qiymati setTimeout() ga uzatiladi.
Eslatma
setTimeout() funksiyasi callback funksiyasini keyinroq ishga tushirish uchun vaqt ajratadi.
Anonim funksiyadan foydalanish
Siz anonim funksiyani setTimeout() ga o‘tkazishingiz mumkin.
Taymerlar JavaScript’ni to‘xtatib qo‘ymaydi
Calling setTimeout() does not pause JavaScript.
JavaScript darhol keyingi operator bilan davom etadi.
Misol
myDisplayer("Start");
setTimeout(function() {myDisplayer("Timer")}, 3000);
myDisplayer("End");
Natija:
Start
End
Timer
Eslatma
Taymer funksiyalari callback-ni keyinroq ishga tushirishni rejalashtiradi.
setTimeout() JavaScript-ni boshqa kodni ishga tushirishni to‘xtatmaydi.
Nol kechikish
Nol millisekundlik kechikish callback qilish funksiyasi darhol ishga tushishini anglatmaydi.
Bu shuni anglatadiki, callback joriy JavaScript vazifasi tugashi bilanoq boshlanadi.
Misol
myDisplayer("Start");
setTimeout(function() {myDisplayer("Timer")}, 0);
myDisplayer("End");
Natija:
Start
End
Timer
Kechikish — bu minimal vaqt
Belgilangan kechikish - bu callback qilishning eng erta vaqti.
Agar JavaScript band bo‘lsa, callback kechroq ishga tushishi mumkin.
Misol
setTimeout(function() {
myDisplayer("Timer finished");
}, 1000);
let i = 4e9;
while (--i > 0);
Taymer kechikishi bir soniya.
Biroq, callback sikl tugamaguncha ishga tusha olmaydi.
Taymerlar ishlayotgan JavaScript kodini to‘xtatmaydi.
Uzoq vaqt davomida ishlaydigan funksiya taymer callback’larini kechiktirishi va sahifani javob bermaydigan holatga keltirishi mumkin.
Timeout’ni bekor qilish
setTimeout() funksiyasi taymer identifikatorini qaytaradi.
Taymerni bekor qilish uchun identifikatorni clearTimeout()’ga uzating.
Sintaksis
clearTimeout(timerId);
Misol
<button onclick="startTimer()">Start Timer</button>
<button onclick="stopTimer()">Stop Timer</button>
<p id="demo"></p>
let timer;
function startTimer() {
timer = setTimeout(function() {
document.getElementById("demo").innerHTML = "Finished";
}, 5000);
}
function stopTimer() {
clearTimeout(timer);
document.getElementById("demo").innerHTML = "Timer stopped";
}
setInterval() funksiyasi
setInterval() funksiyasi callback funksiyani takroran ishga tushiradi.
Sintaksis
setInterval(function, milliseconds);
Callback funksiya chaqiruvlar orasida (kamida) belgilangan kechikish bilan takroran chaqiriladi.
Misol
Joriy vaqtni har soniyada ko‘rsatish:
setInterval(showTime, 1000);
function showTime() {
const date = new Date();
myDisplayer(date.toLocaleTimeString());
}
Intervalni bekor qilish
setInterval() funksiyasi interval identifikatorini qaytaradi.
Intervalni to‘xtatish uchun identifikatorni clearInterval()’ga uzating.
Sintaksis
clearInterval(intervalId);
Misol
<button onclick="startClock()">Start Clock</button>
<button onclick="stopClock()">Stop Clock</button>
<p id="demo"></p>
let timer;
function startClock() {
if (!timer) {
timer = setInterval(showTime, 1000);
}
}
function showTime() {
const date = new Date();
document.getElementById("demo").innerHTML = date.toLocaleTimeString();
}
function stopClock() {
clearInterval(timer);
timer = undefined;
}
Timeout yoki Interval?
| Use | funksiyasi |
|---|---|
| Funksiyani kechikishdan so‘ng bir marta ishga tushirish | setTimeout() |
| Funksiyani takroran ishga tushirish | setInterval() |
| Kechiktirilgan funksiyani bekor qilish | clearTimeout() |
| Takrorlanuvchi funksiyani to‘xtatish | clearInterval() |
Argumentlarni uzatish
setTimeout() yoki setInterval()’ga uzatilgan argumentlar callback funksiyaga uzatiladi.
Misol
setTimeout(showMessage, 2000, "Hello", "John");
function showMessage(greeting, name) {
document.getElementById("demo").innerHTML = greeting + " " + name;
}
Takrorlanuvchi setTimeout()
Har bir vazifa tugagandan so‘ng setTimeout()’ni qayta chaqirib, takrorlanuvchi taymer yaratishingiz mumkin.
Misol
function repeat() {
myDisplayer("Hello");
setTimeout(repeat, 1000);
}
repeat();
Takroriy setTimeout() bilan keyingi kechikish joriy callback tugagandan so‘ng boshlanadi.
setInterval() bilan interval callback’larni muntazam oraliqlarda rejalashtirishda davom etadi.
Takroriy setTimeout() keyingi kechikish boshlanishidan oldin bitta vazifa tugashi kerak bo‘lganda foydali.
Teskari sanoq misoli
Misol
<button onclick="startCountdown()">Start Countdown</button>
<p id="demo"></p>
let timer;
function startCountdown() {
clearInterval(timer);
let count = 10;
myDisplayer(count);
timer = setInterval(function() {
count--;
myDisplayer(count);
if (count === 0) {
clearInterval(timer);
myDisplayer("Finished!");
}
}, 1000);
}
Taymer kodi sifatida stringlardan foydalanmang
Taymer funksiyalari stringlarni qabul qilishi mumkin, ammo stringlarni JavaScript kodi sifatida ishlatmaslik kerak.
Tavsiya etilmaydi
setTimeout("myFunction()", 1000);
Recommended
setTimeout(myFunction, 1000);
Funksiyadan o‘tish xavfsizroq, aniqroq va debug qilish osonroq.
Taymerlar asosiy oqimda ishlaydi
Brauzer kutish davrini joriy JavaScript vazifasidan tashqari boshqaradi.
Biroq, taymerni callback qilish hali ham asosiy JavaScript-da ishlaydi.
Shu sababli uzoq ishlaydigan taymer callback’i sahifani qotirib qo‘yishi mumkin.
Misol
setTimeout(function() {
let i = 4e9;
while (--i > 0);
document.getElementById("demo").innerHTML = "Finished";
}, 1000);
Callback boshlanganda taymer kechiktiriladi.
Bu callback-ni boshlaganidan keyin sahifani bloklashiga to‘sqinlik qilmaydi.
Taymerlar bilan bog‘liq keng tarqalgan xatolar
Funksiyani darhol chaqirish
setTimeout(myFunction(), 1000);
Funksiyani o‘tkazishda qavslarni olib tashlang:
setTimeout(myFunction, 1000);
Taymer identifikatorini unutish
Agar taymerni keyinroq bekor qilish kerak bo‘lsa, qaytarilgan identifikatorni saqlab qo‘ying.
const timer = setTimeout(myFunction, 1000);
clearTimeout(timer);
Bir nechta intervalni ishga tushirish
Intervalni bir necha marta boshlash bir nechta takrorlanuvchi taymerlarni yaratadi.
if (!timer) {
timer = setInterval(myFunction, 1000);
}
Aniq vaqtni kutish
Taymer kechikishlari aniq jadval emas.
Callback’lar faqat JavaScript tayyor bo‘lganda ishga tushadi.
Intervalni to‘xtatishni unutish
Interval to‘xtatilmaguncha yoki sahifa yopilguncha davom etadi.
clearInterval(timer);
Slayd-shou misoli
Taymerlar yordamida rasmlarni avtomatik almashtirish mumkin.
Ushbu misolda har uch soniyada yangi rasm ko‘rsatiladi.
Misol
<img id="slide" src="img_nature.jpg" style="width:100%;max-width:600px">
<button onclick="startSlides()">Start</button>
<button onclick="stopSlides()">Stop</button>
const images = [
"img_nature.jpg",
"img_snowtops.jpg",
"img_mountains.jpg"
];
let index = 0;
let timer;
function showNextSlide() {
index = (index + 1) % images.length;
document.getElementById("slide").src = images[index];
}
function startSlides() {
if (!timer) {
timer = setInterval(showNextSlide, 3000);
}
}
function stopSlides() {
clearInterval(timer);
timer = undefined;
}
Qolgan operator % oxirgi rasmdan keyin indeksni nolga qaytaradi.
startSlides()-dagi test bir vaqtning o‘zida bir nechta intervallarning ishlashini oldini oladi.
Taymerlar va asinxron JavaScript
Taymerlar callback funksiyalarini keyinroq ishga tushirishni rejalashtiruvchi brauzer API’laridir.
Ular ko‘pincha asinxron JavaScript-ning oddiy misollari sifatida ishlatiladi.
callback-ning o‘zi asinxron emas.
Brauzer taymeri faqat callback-ni keyinroq bajarish uchun rejalashtirilishiga olib keladi.
Batafsil bilib oling:
Asynchronous programming includes:
- Callbacks
- Promises
- async / await
- Event Loop
- Web Workers
Taymerlar asinxron dasturlashga qanday mos kelishini bilish uchun:
W3Schools Pathfinder
Yutuqlaringizni kuzating – bu bepul!