În calitate de dezvoltator web, capacitatea de răspuns și interactivitatea aplicației dvs. web sunt componente cheie ale experienței utilizatorului. Pentru a îmbunătăți experiența utilizatorului aplicației dvs., va trebui să adăugați comportamente dinamice și să aveți control asupra timpului în care sunt executate anumite bucăți de cod din aplicația dvs.
Metoda setTimeout() este un instrument excelent pentru aceasta, deoarece vă permite să programați execuția codului, să orchestrați animații, să creați cronometre și să gestionați operațiuni asincrone în aplicația dvs.
Prin urmare, este important să înțelegeți sintaxa setTimeout(), cum să o utilizați și cum o puteți aplica în următorul proiect. Acest articol va explora exact acest lucru și vă va dota cu cunoștințele potrivite pentru a vă permite să profitați la maximum de metoda setTimeout().
Cuprins
Funcția setTimeout a JavaScript
setTimeout() este o metodă globală legată de obiectul fereastră și este folosită pentru a executa o funcție sau o bucată de cod, după o anumită perioadă. De exemplu, dacă aveți o funcție pe care doriți să o executați după patru secunde, setTimeout() este metoda pe care ați folosi-o pentru a realiza acest lucru.
Când este utilizată, metoda setTimeout() setează un cronometru care numără invers până când trece timpul pe care îl specificați, apoi execută funcția sau codul pe care l-ați transmis.
Fiind o metodă globală înseamnă că setTimeout() se găsește în obiectul global și, prin urmare, este disponibil peste tot fără a fi nevoie de import. Obiectul global, care este furnizat de Document Object Model (DOM) în browser, este referit de fereastra cu numele proprietății.
Prin urmare, putem folosi window.setTimeout() sau pur și simplu setTimeout() deoarece va fi implicită fereastra obiectului global. window.setTimeout() și setTimeout() nu au nicio diferență.
Sintaxa generală pentru setTimeout() este următoarea:
setTimeout(function, delay)
- function – aceasta este functia care trebuie executata dupa un anumit timp.
- întârziere – timpul în milisecunde după care urmează să fie executată funcția trecută. 1 secundă este echivalentă cu 1000 de milisecunde.
Când utilizați setTimeout(), întârzierea pe care o specificați ar trebui să fie o valoare numerică pentru a evita rezultate nedorite. Argumentul întârziere este opțional. Dacă nu este specificat, este implicit la 0 și funcția transmisă este executată imediat.
setTimeout() returnează un identificator unic cunoscut sub numele de timeoutID, care este un număr întreg pozitiv care identifică în mod unic cronometrul creat atunci când este apelată metoda setTimeout().
De asemenea, este important să rețineți că setTimeout() este asincron. Cronometrul său nu oprește execuția altor funcții din stiva de apeluri.
Cum se utilizează setTimeout()
Să ne uităm la exemple care arată cum să folosiți metoda setTimeout():
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)
Ieșire:
Hello World in an arrow function - 1 second Hello World after 3 seconds
În ieșirea de mai sus, al doilea setTimeout() își deconectează mai întâi ieșirea, deoarece are o întârziere mai scurtă de 1 secundă, comparativ cu primul care are o întârziere de 3 secunde. După cum sa menționat mai devreme, setTimeout() este asincron. Când este apelat primul setTimeout() cu o întârziere de 3 secunde, este pornit un cronometru de 3 secunde, dar nu oprește execuția celuilalt cod din program.
Pe măsură ce metoda numără invers de la 3, restul codului din stiva de apeluri este executat. În acest exemplu, următoarea bucată de cod este a doua setTimeout() cu o întârziere de 1 secundă. Deoarece are o întârziere mult mai scurtă, acesta este motivul pentru care codul său este executat înainte de primul setTimeout()
Când utilizați setTimeout(), nu trebuie să scrieți direct funcția în metoda setTimeout().
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: tipstrick.ro:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)
Ieșire:
Hello there! How are you doing? Yours Sincerely: tipstrick.ro:)
Când definim o metodă în altă parte, apoi o transmitem setTimeout(), ceea ce trecem în metoda setTimeout() este o referință la funcția pe care dorim să o executăm după un anumit timp.
setTimeout() cu parametri suplimentari
setTimeout() are o sintaxă alternativă care vă permite să treceți parametri suplimentari în metoda setTimeout(). Acești parametri vor fi utilizați în funcția pe care o executați după întârziere.
Sintaxa este următoarea:
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Puteți trece orice număr dat de parametri suplimentari în funcție de numărul de argumente necesare funcției la care faceți referire.
Luați în considerare funcția de mai jos:
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
Dacă doriți să executați funcția de mai sus după o anumită perioadă de timp folosind setTimeout(), o puteți face așa cum se arată mai jos:
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");
Ieșire:
Hello John, happy coding!
Amintiți-vă, dacă definim o funcție în altă parte și apoi o trecem în setTimeout(), ceea ce transmitem este pur și simplu o referință la funcție. În exemplul de mai sus, trecem referința greet și nu greet(), care apelează funcția. Vrem ca setTimeout() să fie cel care apelează funcția folosind referința acesteia.
Acesta este motivul pentru care nu putem trece direct parametrii suplimentari, așa cum se arată mai jos:
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);
În codul de mai sus, funcția de salut este executată imediat, fără a aștepta să treacă 2 secunde. Apoi se aruncă o eroare. Rezultatul executării codului este prezentat mai jos:
Se anulează setTimeout()
Putem împiedica executarea unei funcții programate folosind setTimeout() folosind metoda clearTimeout(). Așa ceva poate fi necesar dacă am setat o funcție să se execute după o anumită perioadă, dar nu dorim ca funcția să se execute după ce anumite condiții au fost îndeplinite sau condițiile se schimbă.
Sintaxa pentru metoda clearTimeout() este cea prezentată mai jos:
clearTimeout(timeoutID)
clearTimeout() ia un singur argument, timeoutID, care este identificatorul unic returnat de metoda setTimeout().
Luați în considerare exemplul de mai jos:
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)
Ieșire:
2 cleared out Hello after 5 seconds
Funcția text() nu este executată deoarece clearTimeout() este folosit pentru a-și anula timeout-ul, prevenind astfel executarea acesteia.
Avantajele utilizării setTimeout()
Unele dintre avantajele utilizării metodei setTimeout() includ:
- Întârzierea execuției codului – funcția principală a setTimeout() este de a permite dezvoltatorilor să întârzie execuția codului. Aceasta este o caracteristică crucială atunci când creați animații, gestionați evenimente cronometrate și, de asemenea, controlați fluxul de cod asincron. setTimeout() eliberează, de asemenea, firul principal pentru a rula alt cod.
- Implementarea temporizatoarelor – setTimeout() oferă o modalitate simplă de a implementa cronometre simple într-o aplicație fără a fi nevoie să folosiți biblioteci externe sau să efectuați operațiuni complexe de dată.
- Throttling și Debouncing – setTimeout() poate fi folosit pentru a limita numărul de apeluri ale anumitor funcții sau de acțiuni efectuate, în special în timpul evenimentelor precum derularea sau tastarea. Cu debouncing, aplicația dvs. așteaptă o anumită perioadă de timp înainte de a apela o funcție. Limitarea limitează numărul de apeluri de funcții efectuate într-o anumită perioadă de timp. setTimeout() poate fi folosit pentru a realiza ambele
- Îmbunătățiți experiența utilizatorului – setTimeout() vă permite să îmbunătățiți experiența utilizatorului aplicației dvs. controlând când au loc anumite acțiuni, cum ar fi când sunt afișate notificări, alerte, mesaje pop-up și animații. Acest lucru este util pentru a preveni supraîncărcarea de informații asupra utilizatorilor, îmbunătățind astfel experiența utilizatorului.
- Îmbunătățiți performanța web – setTimeout() poate fi utilizat pentru a îmbunătăți performanța și capacitatea generală de răspuns a aplicațiilor web prin descompunerea problemelor complexe în probleme mai mici, mult mai simple. Aceste probleme mai mici pot fi gestionate în cadrul unui setTimeout(), permițând altor părți ale codului să continue execuția, fără a afecta performanța sau capacitatea de răspuns a unei aplicații.
În mod clar, setTimeout() este atât puternic, cât și foarte util atunci când construiești aplicații folosind JavaScript.
Dezavantajele utilizării setTimeout()
Unele dintre dezavantajele utilizării setTimeout() includ:
- Timp inexact – setTimeout() nu poate garanta ora exactă la care va fi apelată o funcție sau efectuată o operație. Uneori, alt cod scris prost duce la condiții de cursă care vor afecta funcționarea setTimeout(). Când utilizați mai multe setTimeout()-uri suprapuse, nu puteți fi întotdeauna sigur de ordinea execuției, mai ales dacă sunt implicate alte operații asincrone
- Callback Hell – Dacă aveți prea multe apeluri setTimeout() imbricate, codul dvs. poate deveni greu de citit și de depanat. De asemenea, va fi foarte dificil să urmăriți fluxul logic în aplicația dvs. Utilizarea prea multor setTimeout() poate duce, de asemenea, la probleme de memorie în aplicația dvs. dacă apelurile setTimeout() nu sunt gestionate corect.
În timp ce setTimeout() poate preveni unele provocări atunci când îl utilizați, respectând cele mai bune practici și bune practici de codare, puteți minimiza sau evita complet dezavantajele aplicației dvs.
Concluzie
Metoda setTimeout() poate fi folosită pentru a întârzia execuția funcțiilor. setTimeout este folosit în mod obișnuit pentru animații, încărcare întârziată a conținutului și gestionarea timeout-urilor pentru solicitări.
De exemplu, puteți utiliza setTimeout() pentru a afișa alerte pe paginile dvs. web. În timp ce setTimeout() nu garantează ora exactă în care o funcție este executată, garantează execuția acesteia după o întârziere stabilită.
De asemenea, puteți explora platformele JavaScript ORM pentru o codificare eficientă.