Példák a set-upout () függvény használatára
A setTimeout használatának alapvető példája
A munka alapelvének megismeréséhez jegyezze fel az alábbi bemutatót, amely két másodperccel megnyomja a felugró ablakot.
Az MDN dokumentáció szerint. a setTimeout függvény a következő szintaxissal rendelkezik:
- A timeoutID olyan numerikus azonosító, amelyet a clearTimeout () függvény használható az időzítő kikapcsolásához.
- func - a végrehajtandó függvény.
- kód (alternatív szintaxis) - a végrehajtandó kódblokk.
- késleltetés - a késleltetés milliszekundumban, amely után a funkció végrehajtásra kerül. Az alapértelmezett érték 0.
setTimeout és window.setTimeout
Észrevette, hogy a window.setTimeout feletti systaxisban van. Miért?
Nos, a setTimeout és az window.setTimeout lényegében ugyanaz, az egyetlen különbség az, hogy a második esetben a setTimeout kifejezést a globális ablakobjektum tulajdonságaként említjük.
Véleményem szerint ez csak komplexitást, kis előnyt kínál - ha valahol egy alternatív módszert definiál a setTimeout-ot, amely korábban a célcsoportok területén található meg, akkor nagy problémái lesznek.
A példákban elhagyom az ablakot, amelyre a szintaxis a rajtad múlik.
Használati példák
A setTimeout függvény első függvényként hivatkozik a függvényre.
Ez lehet egy függvénynév:
A funkcióval kapcsolatos változó:
A setTimeouthoz egy kódsorozatot is átadhat:
Ez azonban nem javasolt a következő okok miatt:
- Ez a módszer megnehezíti az olvasást (valamint a kíséreteket és / vagy a hibakeresést).
- Belül, eval () használatos, ami nem biztonságos.
- Ez a módszer lassabb, mint a többi, mert felhívja a JS tolmácsot.
A StackOverflow-on többet olvashat erről.
A paraméterek megadása a setTimeout paraméterhez
Az alapvető forgatókönyv szerint a visszahívási függvény paramétereinek átadásának előnyben részesített keresztböngésző módja az, hogy az anonim funkciót a setTimeout első argumentumaként adja át.
Az alábbi példában egy véletlenszerű üdvözletet választunk ki a üdvözlő tömbből, és átadjuk azt paraméterként a üdvözlő funkciónak.
Alternatív módszer
Amint a cikk elején található szintaxisból látható, a setTimeout által végrehajtott visszahívási funkciónak egy másik módja van a paraméterek átadására. Ez a paramétereket közvetlenül a setTimeout funkció késleltetése után továbbítja.
Sajnos ez a módszer nem működik az IE 9-ben és az alatt, az összes paraméter értéke ebben a böngészőben nem lesz meghatározva. Van egy polifil, ami elérhető az MDN-ben.
A "ez"
A setTimeout-ban végrehajtott kód külön végrehajtási környezetben történik. Ez problémává válik, ha fontos a változó értékének tárolása.
A fenti példában szereplő hiba oka, hogy a setTimeout függvényben ez a globális ablakobjektum (amely nem rendelkezik az elsődleges tulajdonsággal).
A probléma megoldásához különböző módok léteznek.
Erre kifejezett érték
Ezt explicit módon beállíthatja a bind () függvénnyel.
Vegye figyelembe, hogy a bind () függvény része az ECMAScript 5 szabványnak, amelyet nem támogatnak a régebbi böngészők.
A Könyvtár használata
Számos könyvtárnak van beépített funkciója a probléma megoldására. Például a jQuery a jQuery.proxy () metódussal rendelkezik. Szükséges egy függvény, és egy újat ad vissza a megadott végrehajtási kontextusban. A mi esetünkben:
Az időzítő törlése
A setTimeout függvény egy numerikus azonosítót ad vissza, amelyet az clearTimeout () függvény használható az időzítő kikapcsolásához.
Nézd meg az alábbi példát. Ha megnyomja a "Start visszaszámlálás" gombot, a visszaszámlálás megkezdődik. Ha elkészült, a kiscicák eltűnnek. Ha megnyomja a "Stop countdown" gombot, a visszaszámlálás megszakad.
Összefoglalva
A natív setTimeout funkció és a jQuery késleltetési módszer használata során bizonyos zavarok is vannak.
A késleltetés módja bizonyos késleltetést okoz a módszertani hívások között, nincs mód a késleltetés visszavonására. Ha például láthatóvá szeretné tenni a képet, várjon öt másodpercet, és elrejtse újra, a késleltetést a következőképpen használhatja:
Minden más célra a setTimeout használata javasolt.
Végül, ha egy késleltetés után többször is futtatni kell a kódot, a setInterval funkció a legjobb. Itt többet olvashat itt.
következtetés
Ebben a cikkben megmutattam, hogyan használhatom a setTimeout függvényt a kód késleltetése érdekében. Megmutattam, hogyan adhatok át paramétereket a setTimeout-nak, felhasználhatják az értéküket a visszahívási funkcióban, és hogyan kell visszavonni az időzítőt.
Talált hibát? Orphus: Ctrl + Enter