Un exemplu de bază pentru utilizarea setTimeout
Pentru a vedea principiul muncii, rețineți demo-ul de mai jos, care deschide o fereastră pop-up la două secunde de la apăsarea butonului.
Conform documentației MDN. funcția setTimeout are următoarea sintaxă:
- timeoutID este un identificator numeric care poate fi utilizat de către funcția clearTimeout () pentru a anula cronometrul.
- func - funcția care trebuie executată.
- cod (sintaxă alternativă) - blocul de cod care urmează să fie executat.
- întârziere - întârzierea în milisecunde, după care funcția va fi executată. Valoarea implicită este 0.
setTimeout și window.setTimeout
Ați observat că în systaxis de mai sus window.setTimeout este folosit. De ce?
Ei bine, setTimeout și window.setTimeout - este, în esență la fel, singura diferență este că, în acest din urmă caz ne referim la setTimeout ca o proprietate globală a ferestrei.
În opinia mea, acest lucru doar adaugă la complexitatea, un ușor avantaj - dacă definiți undeva în setTimeout o metodă alternativă, care va fi amplasat mai devreme în lanțul de domeniul de aplicare, veți avea mari probleme.
În exemple voi omite fereastra, care sintaxa de a utiliza este de până la tine.
Exemple de utilizare
Funcția setTimeout ia o referință la funcție ca primul argument.
Acesta poate fi un nume de funcție:
Referința variabilă a funcției:
De asemenea, puteți trece o linie de cod la setTimeout:
Totuși, acest lucru nu este recomandat din următoarele motive:
- Această metodă face dificilă citirea (precum și însoțirea și / sau depanarea).
- În interior, eval () este folosit, ceea ce nu este sigur.
- Această metodă este mai lentă decât celelalte, deoarece cheamă interpretul JS.
În StackOverflow, puteți citi mai multe despre acest lucru.
Trecerea parametrilor la setTimeout
În scenariul de bază, modul preferat de browser încrucișat de transmitere a parametrilor către funcția de apel invers este să treacă funcția anonimă ca primul argument la setTimeout.
În exemplul de mai jos, selectăm un salut aleatoriu din matricea de saluturi și îl transmitem ca parametru funcției salut.
Metodă alternativă
După cum puteți vedea din sintaxa de la începutul articolului, există oa doua modalitate de a trece parametrii la funcția de apel invers care este executată de setTimeout. Consta in transmiterea parametrilor direct la functia setTimeout dupa o intarziere.
Din păcate, această metodă nu funcționează în IE 9 și mai jos, valoarea tuturor parametrilor din aceste browsere va fi nedefinită. Există un polifil care este disponibil pe MDN.
Problema "acestui"
Codul executat în setTimeout este executat într-un context de execuție separat. Aceasta devine o problemă atunci când este important să stocați valoarea acestei variabile.
Motivul pentru eroarea din exemplul de mai sus este că în funcția setTimeout, acesta este obiectul ferestrei globale (care nu are proprietatea firstName).
Pentru a rezolva această problemă, există mai multe moduri.
O valoare explicită pentru acest lucru
Pentru a seta explicit acest lucru, puteți utiliza funcția bind ().
Rețineți că funcția bind () face parte din standardul ECMAScript 5, nu este acceptată de browsere mai vechi.
Utilizarea Bibliotecii
Multe biblioteci au o funcție integrată pentru a rezolva această problemă. De exemplu, jQuery are metoda jQuery.proxy (). Este nevoie de o funcție și returnează o nouă funcție cu contextul de execuție specificat. În cazul nostru:
Anularea cronometrului
Funcția setTimeout returnează un id numeric care poate fi utilizat de funcția clearTimeout () pentru a anula cronometrul.
Uitați-vă la exemplul de mai jos. Dacă apăsați butonul "Începeți numărătoarea inversă", va începe numărătoarea inversă. Dacă este terminată, pisoii vor dispărea. Dacă apăsați butonul "Stop countdown", numărătoarea inversă va fi anulată.
Pentru a rezuma
Există, de asemenea, o oarecare confuzie atunci când se utilizează funcția nativă setTimeout și metoda de întârziere jQuery.
Metoda de întârziere adaugă o anumită întârziere între apelurile metodice, nu există nicio modalitate de a anula întârzierea. De exemplu, dacă doriți să faceți imaginea vizibilă, așteptați cinci secunde și o ascundeți din nou, puteți utiliza întârzierea după cum urmează:
Pentru orice altceva, este mai bine să utilizați setTimeout.
În cele din urmă, dacă trebuie să executați codul de mai multe ori după o anumită întârziere, funcția setInterval este cea mai bună. Puteți citi mai multe despre el aici.
concluzie
În acest articol am arătat cum să folosesc funcția setTimeout pentru a executa codul cu întârziere. De asemenea, am arătat cum să treci parametrii la setTimeout, să folosiți valoarea lor în funcția de apel invers și cum să anulați cronometrul.
Ați găsit o greșeală? Orphus: Ctrl + Enter
Articole similare
Trimiteți-le prietenilor: