A JavaScript időtúllépés egy natív javascript függvény, amely meghatározott időkésleltetés után (ezredmásodpercben) hajt végre egy kódrészletet. Ez jól jöhet, ha egy előugró ablakot kell megjelenítenie, miután a felhasználó egy kis időt töltött az oldalon. Vagy azt szeretné, ha az effektus akkor indulna el, ha a kurzort csak egy idő után viszi az elem fölé. Így elkerülheti a hatás véletlen beindítását, ha a felhasználó véletlenül lebeg.

Egy egyszerű setTimeout példa

E funkció hatásának bemutatása érdekében javaslom, hogy tekintse meg az alábbi bemutatót, amelyben egy előugró ablak jelenik meg két másodperccel a gomb megnyomása után.

Demo megtekintése

Szintaxis

Az MDN dokumentáció a következő szintaxist biztosítja a setTimeout számára:

var timeoutID = window.setTimeout (func,); var timeoutID = window.setTimeout (kód,);

• timeoutID egy numerikus azonosító, amely a clearTimeout () -al együtt használható az időzítő letiltásához;
• a func a végrehajtandó függvény;
• kód ( alternatív szintaxisban) - a végrehajtandó kód sora;
• késleltetés - a késleltetés időtartama ezredmásodpercben, amely után a funkció futni fog. Az alapértelmezett érték 0.

setTimeout vs window.setTimeout

A fenti szintaxis az window.setTimeout beállítást használja. Miért?

Valójában a setTimeout és a window.setTimeout gyakorlatilag ugyanaz a funkció. Az egyetlen különbség az, hogy a második utasításban a setTimeout metódust használjuk a globális ablakobjektum tulajdonságaként.

Személy szerint szerintem ez csak nagyon bonyolítja a kódot. Ha egy alternatív JavaScript időtúllépési módszert definiálnánk, amely prioritási sorrendben megtalálható és visszaküldhető, akkor még nagyobb problémákba ütköznénk.

Ebben az oktatóanyagban nem akarok összezavarni az ablak objektummal, de általában Ön dönti el, hogy melyik szintaxist használja.

Példák a felhasználásra

Ez lehet a függvény neve:

function Explode () (alert ("Boom!");) setTimeout (robbanás, 2000);

A funkcióra utaló változó:

var felrobban = function () (alert ("Boom!");); setTimeout (robbanás, 2000);

Vagy egy névtelen funkció:

setTimeout (function () (alert ("Boom!");), 2000);

• Az ilyen kódot rosszul értelmezik, ezért nehéz lesz modernizálni vagy hibakeresni;
• Ez magában foglalja az eval () metódus használatát, amely potenciális biztonsági rés lehet;
• Ez a módszer lassabb, mint mások, mert futnia kell JavaScript tolmács.

Ne feledje, hogy a riasztási módszert a JavaScript időtúllépésére használjuk a kód tesztelésére.

Paraméterek átadása a setTimout -nak

Az elsőben ( ezen kívül keresztböngésző) változat, paramétereket adunk át a setTimeout használatával végrehajtott visszahívási függvénynek.

A következő példában kivonunk egy véletlenszerű üdvözletet az üdvözlőtömbből, és átadjuk paraméterként a welcome () függvénynek, amelyet a setTimeout hajt végre 1 másodperces késéssel:

függvény köszönt (üdvözlés) (console.log (üdvözlés);) függvény getRandom (arr) (visszatérés arr;) var gratulációk = ["Hello", "Bonjour", "Guten Tag"], randomGreeting = getRandom (üdvözlet); setTimeout (function () (köszönt (randomGreeting);), 1000);

Demo megtekintése

Alternatív módszer

A cikk elején található szintaxisban van egy másik módszer, amellyel paramétereket lehet átadni a JavaScript timeout által végrehajtott visszahívási függvénynek. Ez a módszer magában foglalja a késleltetést követő összes paraméter kimenetét.

Az előző példára építve kapjuk:

setTimeout (köszönés, 1000, randomGreeting);

Ez a módszer nem működik az IE 9 -es és régebbi verzióiban, ahol az átadott paraméterek nincsenek definiálva. De hogy megoldja ezt a problémát Az MDN speciális polietöltővel rendelkezik.

Kapcsolódó problémák és "ez"

A setTimeout által végrehajtott kód külön fut a hívó függvénytől. Emiatt bizonyos problémákkal kell szembenéznünk, ez a kulcsszó használható megoldásként.

var személy = (keresztnév: "Jim", bevezetés: function () (console.log ("Szia, én" m "+ ez a keresztnév);)); person.introduce (); // Kimenetek: Szia, én" m Jim setTimeout (person.introduce, 50); // Kimenetek: Szia, meghatározatlan vagyok

Ennek a következtetésnek az az oka, hogy az első példában ez a személyobjektumhoz vezet, a második példában pedig a globális ablakobjektumra mutat, amely nem rendelkezik a firstName tulajdonsággal.

Ennek az ellentmondásnak a kiküszöbölésére számos módszert használhat:

Kényszerítse ezt az értéket a beállításra

Ezt megteheti a bind () használatával, egy olyan módszerrel, amely új függvényt hoz létre, amely ennek a kulcsnak az értékeként történő meghívásakor egy adott értéket használ. Esetünkben a megadott személy objektum. Ennek eredményeként kapjuk:

setTimeout (person.introduce.bind (személy), 50);

Megjegyzés: A kötési módszert az ECMAScript 5 -ben vezették be, ami azt jelenti, hogy csak a modern böngészőkben fog működni. Más esetekben futásidejű hibát fog kapni, amikor alkalmazza JavaScript "funkció időtúllépési hiba".

Használja a könyvtárat

Sok könyvtár tartalmaz beépített funkciókat a probléma megoldásához. Például a jQuery.proxy () metódus. Funkciót vesz fel és újat ad vissza, amelyben mindig egy adott kontextust fog használni. Esetünkben a kontextus a következő lesz:

setTimeout ($. proxy (person.introduce, person), 50);

Demo megtekintése

Timer letiltása

A setTimeout visszatérési értéke egy numerikus azonosító, amellyel letilthatja az időzítőt a clearTimeout () függvénnyel:

var timer = setTimeout (myFunction, 3000); clearTimeout (időzítő);

Lássuk működés közben. A következő példában, ha rákattint a gombra " Indítsa el a visszaszámlálást”, A visszaszámlálás elindul. Miután vége, a cicák megkapják a magukét. De ha megnyomja a gombot " Állítsa le a visszaszámlálást", A JavaScript időtúllépése leáll és visszaáll.

Példa megtekintése

Összefoglaljuk

A setTimeout aszinkron függvény, ami azt jelenti, hogy a kapott hívás sorba kerül, és csak akkor hajtódik végre, ha a verem összes többi művelete befejeződött. Nem futhat párhuzamosan más funkciókkal vagy külön szállal.

Az setInterval () módszer, amelyet az Ablak és a Worker felületen kínálnak, többször meghív egy függvényt, vagy végrehajt egy kódrészletet, minden hívás között rögzített késleltetéssel. Egy intervallumazonosítót ad vissza, amely egyedileg azonosítja az intervallumot, így később eltávolíthatja azt a clearInterval () meghívásával. Ezt a módszert a WindowOrWorkerGlobalScope mixin határozza meg.

Szintaxis

var intervalID = hatálya.setInterval ( func, késleltetés, [arg1, arg2, ...]); var intervalID = hatálya.setInterval ( kód, késleltetés);

Paraméterek

func Funkció, amelyet ezredmásodpercenként kell végrehajtani. A függvény semmilyen argumentumot nem ad át, és nem számít visszatérési értékre. kód Az opcionális szintaxis lehetővé teszi, hogy egy karakterláncot vegyen fel a függvény helyett, amelyet minden késleltetés ezredmásodperc alatt összeállít és végrehajt. Ez a szintaxis az nem ajánlott ugyanazon okok miatt, amelyek miatt az eval () használata biztonsági kockázat. delay Az idő, ezredmásodpercben (ezredmásodperc), az időzítőnek késleltetnie kell a megadott funkció vagy kód végrehajtása között. Lásd alább a késleltetési értékek megengedett tartományának részleteit. arg1, ..., argN Választható További argumentumok, amelyeket a (z) által megadott függvény továbbít func ha az időzítő lejár.

jegyzet: További érvek átadása a setInterval () fájlnak az első szintaxisban nem működik az Internet Explorer 9 és korábbi verzióiban. Ha engedélyezni szeretné ezt a funkciót az adott böngészőben, akkor többkitöltést kell használnia (lásd a részt).

Visszaadott érték

A visszaadott intervalID egy számszerű, nem nulla érték, amely azonosítja a setInterval () hívás által létrehozott időzítőt; ez az érték továbbítható az időtúllépés törléséhez.

Hasznos lehet annak tudatában, hogy a setInterval () és a setTimeout () azonos azonosítókészlettel rendelkezik, és hogy a clearInterval () és a clearTimeout () technikailag felcserélhető. Az egyértelműség érdekében azonban meg kell próbálnia mindig egyeztetni őket, hogy elkerülje a zavart a kód karbantartása során.

jegyzet: A delay argumentum aláírt 32 bites egész számgá alakul. Ez gyakorlatilag korlátozza a késleltetést 2147483647 ms -ra, mivel az IDL -ben aláírt egész számként van megadva.

Példák

1. példa: Alapszintű szintaxis

A következő példa bemutatja a setInterval () alapvető szintaxisát.

Var intervalID = window.setInterval (myCallback, 500, "1. paraméter", "2. paraméter"); function myCallback (a, b) (// Itt a kódod // A paraméterek nem kötelezőek. console.log (a); console.log (b);)

2. példa: Két szín váltakozása

A következő példa másodpercenként hívja meg a flashtext () függvényt, amíg meg nem nyomja a Stop gombot.

Álljon meg

3. példa: Írógép szimuláció

A következő példa szimulálja az írógépet azáltal, hogy először törli, majd lassan beírja a tartalmat a NodeList -be, amely megfelel a kiválasztók meghatározott csoportjának.

CopyLeft 2012 a Mozilla Developer Network által

[ Játék | Szünet | Megszüntetni ]

JavaScript írógép

Visszahívási érvek

Amint azt korábban említettük, az Internet Explorer 9 -es és korábbi verziói nem támogatják az érvek átadását a visszahívási funkciónak sem a setTimeout (), sem a setInterval () fájlban. A következő IE-specifikus kód bemutatja ezt a korlátozást. A használathoz egyszerűen adja hozzá a következő kódot a szkript tetejéhez.

/ * \ | * | | * | IE-specifikus polifill, amely lehetővé teszi tetszőleges érvek átvitelét a | * | -ba javascript időzítők visszahívási funkciói (HTML5 szabvány szintaxis) .. setInterval | * | https: // site / User: fusionchess | * | | * | Szintaxis: | * | var timeoutID = window.setTimeout (func, delay [, arg1, arg2, ...]); | * | var timeoutID = window.setTimeout (kód, késleltetés); | * | var intervalID = window.setInterval (func, delay [, arg1, arg2, ...]); | * | var intervalID = window.setInterval (kód, késleltetés); | * | \ * / if (document.all &&! window.setTimeout.isPolyfill) (var __nativeST__ = window.setTimeout; window.setTimeout = function (vCallback, nDelay / *, argumentToPass1, argumentToPass2 stb. * /) (var aArgs = Array .prototype.slice.call (argumentumok, 2); return __nativeST __ (vCallback instance of Function? function () (vCallback.apply (null, aArgs);): vCallback, nDelay);); window.setTimeout.isPolyfill = true; ) if (document.all &&! window.setInterval.isPolyfill) (var __nativeSI__ = window.setInterval; window.setInterval = function (vCallback, nDelay / *, argumentToPass1, argumentToPass2 stb. * /) (var aArgs = Array.prototype . szelet.call (argumentumok, 2); return __nativeSI __ (vCallback instance of Function? function () (vCallback.apply (null, aArgs);): vCallback, nDelay);); window.setInterval.isPolyfill = true;)

Egy másik lehetőség egy névtelen funkció használata a visszahíváshoz, bár ez a megoldás valamivel drágább. Példa:

Var intervalID = setInterval (function () (myFunc ("egy", "kettő", "három");), 1000); var intervalID = setInterval (függvény (arg1) () .bind (undefined, 10), 1000);

Inaktív lapok

Szükséges Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

A Gecko 5.0 -tól (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) kezdve az intervallumokat másodpercenként legfeljebb egyszer aktiválják az inaktív lapokon.

Az "ez" probléma

Ha átad egy metódust a setInterval () vagy bármely más függvénynek, akkor ezt a hibás értékkel hívja meg. Ezt a problémát részletesen ismerteti a JavaScript hivatkozás.

Magyarázat

A setInterval () által végrehajtott kód külön végrehajtási kontextusban fut, mint a függvény, ahonnan hívták. Ennek következtében a meghívott függvényhez tartozó kulcsszó az ablak (vagy globális) objektumra van állítva, nem azonos a setTimeout nevű függvény értékével. Lásd a következő példát (amely a setTimeout () értéket használja a setInterval () helyett - a probléma valójában mindkét időzítőnél ugyanaz):

MyArray = ["nulla", "egy", "kettő"]; myArray.myMethod = function (sProperty) (alert (argumentumok.length> 0? this: this);); myArray.myMethod (); // kinyomtatja "nulla, egy, kettő" myArray.myMethod (1); // "one" setTimeout kiírja (myArray.myMethod, 1000); // "" nyomtat 1 "setTimeout után (myArray.myMethod, 1500," 1 "); // "undefined" -et nyomtat 1,5 másodperc után // átadja az "ezt" objektumot .call won "t work // mert ez megváltoztatja ennek a setTimeout -nak az értékét //, miközben ennek az értékét szeretnénk megváltoztatni a myArray -n belül .myMethod // valójában hiba lesz, mert a setTimeout kód elvárja, hogy ez legyen az ablakobjektum: setTimeout.call (myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation in WrappedNative prototype object" setTimeout.call (myArray, myArray.myMethod, 2500, 2); // ugyanaz a hiba

Amint láthatja, nincs lehetőség arra, hogy ezt az objektumot átadja a visszahívási funkciónak a régi JavaScriptben.

Egy lehetséges megoldás

Az "ez" probléma megoldásának egyik lehetséges módja a két natív setTimeout () vagy setInterval () globális függvény kicserélése két nem őshonos olyanokat, amelyek lehetővé teszik a hívásukat a Function.prototype.call metóduson keresztül. Az alábbi példa egy lehetséges cserét mutat be:

// Engedélyezze az "ez" objektum áthaladását a JavaScript időzítőkön keresztül var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = function (vCallback, nDelay / *, argumentToPass1, argumentToPass2 stb. * /) (var oThis = this, aArgs = Array.prototype.slice.call (argumentumok, 2); return __nativeST __ (vCallback példánya function () (vCallback.apply (oThis, aArgs);): vCallback, nDelay);); window.setInterval = function (vCallback, nDelay / *, argumentToPass1, argumentToPass2 stb. * /) (var oThis = this, aArgs = Array.prototype.slice.call (argumentumok, 2); return __nativeSI __ (vCallback instanceof Function? function () (vCallback.apply (oThis, aArgs);): vCallback, nDelay););

Ez a két helyettesítés lehetővé teszi a HTML5 szabványos tetszőleges argumentumok átvitelét az időzítők visszahívási funkcióihoz az IE -ben. Tehát felhasználhatók nem szabványnak megfelelő polifill is. Lásd a szabványnak megfelelő polifill.

Új funkció teszt:

MyArray = ["nulla", "egy", "kettő"]; myArray.myMethod = function (sProperty) (alert (argumentums.length> 0? this: this);); setTimeout (riasztás, 1500, "Hello world!"); // a setTimeout és a setInterval szabványos használata megmarad, de ... setTimeout.call (myArray, myArray.myMethod, 2000); // "nulla, egy, kettő" nyomtatása 2 másodperc múlva setTimeout.call (myArray, myArray.myMethod, 2500, 2); // 2,5 másodperc múlva "kettőt" nyomtat

Bonyolultabb, de mégis moduláris verziójához ( Démon) lásd: JavaScript démonok kezelése. Ez a bonyolultabb változat nem más, mint a módszerek nagy és skálázható gyűjteménye Démon konstruktőr. Azonban a Démon maga a konstruktor nem más, mint klónja MiniDaemon kiegészítő támogatással benneés induláskor funkciók deklarálhatók a példányosítás során démon . Így a MiniDaemon keretrendszer továbbra is az egyszerű animációk ajánlott módja, mivel Démon módszerek gyűjteménye nélkül lényegében annak klónja.

minidaemon.js

/ * \ | * | | * | :: MiniDaemon :: | * | | * | 2. felülvizsgálat - 2014. szeptember 26. setInterval | * | https: // site / User: fusionchess | * | https://github.com/madmurphy/minidaemon.js | * | | * | Ez a keretrendszer a GNU Lesser General Public License, 3. vagy újabb verziója alatt jelenik meg. | * | http://www.gnu.org/licenses/lgpl-3.0.html | * | \ * / function MiniDaemon (oOwner, fTask, nRate, nLen) (if (! (ez a MiniDaemon példánya)) (return;) if (argumentum.length< 2) { throw new TypeError("MiniDaemon - not enough arguments"); } if (oOwner) { this.owner = oOwner; } this.task = fTask; if (isFinite(nRate) && nRate >0) (this.rate = Math.floor (nRate);) if (nLen> 0) (this.length = Math.floor (nLen);)) MiniDaemon.prototype.owner = null; MiniDaemon.prototype.task = null; MiniDaemon.prototype.rate = 100; MiniDaemon.prototype.length = Végtelen; / * Ezek a tulajdonságok csak olvashatóak legyenek * / MiniDaemon.prototype.SESSION = -1; MiniDaemon.prototype.INDEX = 0; MiniDaemon.prototype.PAUSED = igaz; MiniDaemon.prototype.BACKW = igaz; / * Globális módszerek * / MiniDaemon.forceCall = function (oDmn) (oDmn.INDEX + = oDmn.BACKW? -1: 1; if (oDmn.task.call (oDmn.owner, oDmn.INDEX, oDmn.length, oDmn) .BACKW) === hamis || oDmn.isAtEnd ()) (oDmn.pause (); return false;) return true;); / * Példánymódszerek * / MiniDaemon.prototype.isAtEnd = function () (ezt adja vissza. BACKW? IsFinite (this.length) && this. INDEX< 1: this.INDEX + 1 >ezt.hossz; ); MiniDaemon.prototype.synchronize = function () (if (this.PAUSED) (return;) clearInterval (this.SESSION); this.SESSION = setInterval (MiniDaemon.forceCall, this.rate, this);); MiniDaemon.prototype.pause = function () (clearInterval (this.SESSION); this.PAUSED = igaz;); MiniDaemon.prototype.start = function (bReverse) (var bBackw = Boolean (bReverse); if (this.BACKW === bBackw && (this.isAtEnd () ||! This.PAUSED)) (vissza;) this.BACKW = bVissza; this.PAUSED = hamis; this.synchronize (););

A MiniDaemon argumentumokat ad át a visszahívási funkciónak. Ha olyan böngészőkkel szeretne dolgozni, amelyek natív módon nem támogatják ezt a funkciót, használja a fent javasolt módszerek egyikét.

Szintaxis

var myDaemon = új MiniDaemon ( thisObject, visszahív[ , mérték [, hossz]]);

Leírás

Használati megjegyzések

A setInterval () függvényt általában késleltetés beállítására használják az újra és újra végrehajtott funkciókhoz, például az animációkhoz. Az intervallumot a WindowOrWorkerGlobalScope.clearInterval () segítségével törölheti.

Ha meg akarja hívni a funkcióját egyszer a megadott késleltetés után használja.

Késleltetési korlátozások

Lehetséges intervallumok egymásba ágyazása; vagyis a setInterval () visszahívása viszont meghívhatja a setInterval () egy újabb futási intervallumot, még akkor is, ha az első még tart. Az esetleges hatások mérséklése érdekében teljesítmény, ha az intervallumok öt szintnél mélyebbre vannak beágyazva, a böngésző automatikusan 4 ms minimális értéket kényszerít ki az intervallumra. A setInterval () mélyen beágyazott hívásaiban 4 ms-nál kisebb érték megadására tett kísérletek 4 ms-ra lesznek rögzítve.

A böngészők bizonyos körülmények között még szigorúbb minimális értékeket is érvényesíthetnek az intervallumra, bár ezek nem lehetnek gyakoriak. Vegye figyelembe azt is, hogy a visszahívások közötti hívások közötti tényleges idő hosszabb lehet, mint a megadott késleltetés; lásd példákért a WindowOrWorkerGlobalScope.setTimeout () részben megadottnál hosszabb késések okait.

Győződjön meg arról, hogy a végrehajtás időtartama rövidebb, mint az intervallum gyakorisága

Ha fennáll annak a lehetősége, hogy a logika végrehajtása hosszabb ideig tart, mint az intervallum időtartama, akkor ajánlott a megnevezett függvény rekurzív meghívása a setTimeout () használatával. Például, ha a setInterval () használatával 5 másodpercenként lekérdezi a távoli kiszolgálót, a hálózati késés, a nem válaszoló szerver és számos más probléma megakadályozhatja a kérés befejezését a megadott időn belül. Így előfordulhat, hogy sorban álló XHR kérésekkel találja magát szemben, amelyek nem feltétlenül kerülnek sorrendben vissza.

• Tól től:
• Bejegyzett: 2014.07.08
• Bejegyzések: 3,896
• Tetszik: 497

Téma: SetTimeOut és SetInterval, melyiket érdemes használni a JavaScriptben?

Ha a kódot rendszeres időközönként többször szeretné futtatni, használja a funkciót setInterval... Ennek azonban számos hátránya van, főleg a különböző böngészők eltérő viselkedése.

Az első különbség az a különbség, amikor az időzítőt a következő indításra állítja be. Készítsünk egy kis tesztet: megmérjük az előző futás kezdetétől és végétől eltelt időt.

var d1 = új dátum (), d2 = új dátum (); setInterval (function () (var d = new Date (); document.body.innerHTML + = (d - d1) + "" + (d - d2) + "
"; // Tegyen egy címkét a függvény elejére d1 = new Date (); while (new Date () - d1< 200); // ничего не делаем 200 миллисекунд // И в конце функции d2 = new Date(); }, 1000);

A kimenet informatív lesz a második sortól kezdve.

A Firefox, az Opera, a Safari és a Chrome esetében a helyzet hasonló lesz: az első szám megközelítőleg 1000, a második - 200 -mal kevesebb. Az egyetlen különbség az értéktartományban lesz. A legkisebb variáció a Chrome -ban és az Opera -ban.

2 Válasz PunBB (szerkesztette PunBB 2017.06.08 16:45)

• Tól től: Moszkva, Sovkhoznay 3, apt. 98
• Bejegyzett: 2014.07.08
• Bejegyzések: 3,896
• Tetszik: 497

Egy másik különbség, amely kevésbé észrevehető és nehezebben reprodukálható, de néha sok gondot okozhat, a rendszeridő változásával szembeni ellenállás. Ha futtatja a következő tesztet

setInterval (function () (document.body.innerHTML = Math.random ();), 500);

És az indítás után állítsa vissza a rendszeridőt egy percre, majd a Firefox és a Safari böngészőben a számok változása szünetel, és egy perc múlva újra indul. Természetesen a rendszeridő kézi fordítása rendkívül ritka helyzet, de sok rendszer rendelkezik automatikus időszinkronizálással az internetes szerverekkel, így bizonyos helyzetekben ezt a tényezőt nem lehet figyelmen kívül hagyni.

A setInterval függvény másik apró hátránya, hogy a művelet leállításához valahol emlékeznie kell az azonosítójára, ami nem mindig kényelmes.

3 Válasz PunBB

• Tól től: Moszkva, Sovkhoznay 3, apt. 98
• Bejegyzett: 2014.07.08
• Bejegyzések: 3,896
• Tetszik: 497

Re: SetTimeOut és SetInterval, melyiket érdemes használni a JavaScriptben?

A setInterval felsorolt ​​hátrányainak kiküszöböléséhez használjon több setTimeout -ot.

A setInterval fontos alternatívája a rekurzív setTimeout:

/ ** helyett: var timerId = setInterval (function () (alert ("tick");), 2000); * / var timerId = setTimeout (function tick () (alert ("tick"); timerId = setTimeout (tick, 2000);), 2000);

A fenti kódban a következő végrehajtást közvetlenül az előző befejezése után ütemezzük.

A rekurzív setTimeout rugalmasabb időzítési módszer, mint a setInterval, mivel a következő végrehajtásig eltelt időt az aktuális eredménytől függően másképpen lehet ütemezni.

Például van egy szolgáltatásunk, amely 5 másodpercenként lekérdezi a szervert új adatok után. Ha a szerver túlterhelt, növelheti a lekérdezési intervallumot 10, 20, 60 másodpercre ... És akkor adja vissza, amikor minden normalizálódott.

Ha rendszeresen vannak olyan feladataink, amelyek betöltik a processzort, akkor megbecsülhetjük a végrehajtásukra fordított időt, és előbb -utóbb ütemezhetjük a következő indítást.

4 Válasz PunBB

• Tól től: Moszkva, Sovkhoznay 3, apt. 98
• Bejegyzett: 2014.07.08
• Bejegyzések: 3,896
• Tetszik: 497

Re: SetTimeOut és SetInterval, melyiket érdemes használni a JavaScriptben?

A rekurzív setTimeout szünetet garantál a hívások között, a setInterval nem.

Hasonlítsuk össze a két kódot. Az első a setInterval értéket használja:

var i = 1; setInterval (function () (func (i);), 100);

A második rekurzív timeTimeout -ot használ:

var i = 1; setTimeout (function run () (func (i); setTimeout (run, 100);), 100);

A setInterval használatával a belső időzítő pontosan 100 ms -onként aktiválódik, és meghívja a func (i) funkciót:

A valódi szünet a setInterval függvényhívások között kisebb, mint a kódban megadott!

Ez természetes, mert a függvény futási idejét semmilyen módon nem veszik figyelembe, az intervallum egy részét "megeszi".

Az is lehetséges, hogy a func bonyolultabbnak bizonyult, mint amire számítottunk, és 100 ms -nál hosszabb ideig tartott.

Ebben az esetben a tolmács megvárja a funkció befejezését, majd ellenőrzi az időzítőt, és ha a setInterval hívásának ideje már eljött (vagy lejárt), akkor a következő hívás azonnal megtörténik.

Ha a funkció hosszabb ideig tart, mint a setInterval szünet, akkor a hívások megszakítás nélkül zajlanak.

5 Válasz sempai

• Tól től: Jeruzsálem
• Bejegyzett: 2015.06.02
• Bejegyzések: 958
• Tetszik: 274

Re: SetTimeOut és SetInterval, melyiket érdemes használni a JavaScriptben?

Minden a feladattól függ. Kezdetben a SetTimeOut az időzítő egyszeri indítására, a SetInterval a ciklus indítására szolgál. De mindkét függvény használható a szkriptek ciklusához, ha például rekurzívan fut a SetTimeOut függvényben, akkor a SetIntervalhoz hasonló gyakorlati módon fog működni.

A SetInterval hátránya jelenleg az, hogy nem veszi figyelembe magának a szkriptnek (függvénynek) a végrehajtási idejét, és ha például súlyos kérésekhez használja, akkor az intervallum idő jelentősen csökken, és különböző böngészőkben eltérőek lehetnek.

De ismétlem, ismétlem, ha a funkciót vagy a kérést minimalizálják, akkor a végfelhasználó nem valószínű, hogy érezni fogja a különbséget.
Ezért, hogy mit használjon, mindenki maga dönti el.

Forrás: http://learn.javascript.ru/settimeout-setinterval

Szinte minden JavaScript -megvalósítás rendelkezik egy belső ütemezési időzítővel, amely lehetővé teszi egy funkcióhívás ütemezését egy meghatározott idő után.

Ezt a funkciót különösen a böngészők és a Node.JS szerver támogatja.

setTimeout

Szintaxis:

var timerId = setTimeout (func / code, delay [, arg1, arg2 ...])

Lehetőségek:

• func / kód
  • A végrehajtandó funkció vagy kódsor.
  • A karakterlánc kompatibilis, és elavult.
• késleltetés
  • Késleltetés ezredmásodpercben, 1000 ezredmásodperc 1 másodperc.
• arg1, arg2 ...
  • A függvényhez átadandó érvek. Az IE9- nem támogatja.
  • A funkció a késleltetési paraméterben megadott idő elteltével kerül végrehajtásra.

Például a következő kód egy másodperc múlva figyelmeztetést ("Hello") hív:

függvény func ()(alert ("Hello");) setTimeout (func, 1000);

Ha az első argumentum egy karakterlánc, akkor az értelmező névtelen függvényt hoz létre ebből a karakterláncból.

Vagyis egy ilyen rekord pontosan ugyanúgy működik:

SetTimeout ("alert (" Hello ")", 1000);

Használjon helyette névtelen függvényeket:

SetTimeout ( függvény ()(riasztás ("Hello")), 1000);

Funkcióparaméterek és kontextus

Minden modern böngészőben, az IE10 szem előtt tartásával, a setTimeout lehetővé teszi a funkcióparaméterek megadását.

Az alábbi példában mindenhol megjelenik a "Szia, Vasya vagyok" felirat, kivéve az IE9-:

függvény mondjuk Szia (ki)(alert ("Hello, én vagyok" + ki);) setTimeout (mondjuk Szia, 1000, "Vasya");

... Azonban a legtöbb esetben szükségünk van a régi IE támogatására, és nem teszi lehetővé az érvek megadását. Ezért azok átadása érdekében a hívást névtelen funkcióba csomagolják:

függvény mondjuk Szia (ki)(alert ("Hello, én" + ki);) setTimeout ( függvény ()(mondjuk Szia ("Vasya")), 1000);

A setTimeouton keresztüli hívás nem adja át ezt a kontextust.

Különösen az objektummetódus meghívása a setTimeout segítségével globális kontextusban fog működni. Ez helytelen eredményekhez vezethet.

Például hívjuk fel a user.sayHi () egy másodperc múlva:

függvény User (id) függvény ()(riasztás (ez. id);); ) var user = new User (12345); setTimeout (user.sayHi, 1000); // várható 12345, de "undefined" lesz nyomtatva

Mivel a setTimeout globális kontextusban futtatja a user.sayHi függvényt, ezen keresztül nem lesz képes elérni az objektumot.

Más szóval, ez a két setTimeout hívás ugyanazt teszi:

// (1) egy sor setTimeout (user.sayHi, 1000); // (2) ugyanaz két sorban var func = user.sayHi; setTimeout (func, 1000);

Szerencsére ez a probléma egy köztes függvény létrehozásával is könnyen megoldható:

függvény User (id)(ez .id = id; ez .mondjaHi = függvény ()(riasztás (ez. id);); ) var user = new User (12345); setTimeout ( függvény ()(user.sayHi ();), 1000);

A burkoló funkciót használhatja a böngészők közötti érvek átadására és a végrehajtási környezet tárolására.

A végrehajtás megszakítása

A setTimeout függvény visszaad egy timerId azonosítót, amely egy művelet megszakítására használható.

Szintaxis:

ClearTimeout (timerId)

A következő példában beállítunk egy időtúllépést, majd töröljük (meggondoljuk magunkat). Ennek eredményeként semmi sem történik.

var timerId = setTimeout ( függvény ()(riasztás (1)), 1000); clearTimeout (timerId);

setInterval

A setInterval metódus szintaxisa hasonló a setTimeout -hoz.

var timerId = setInterval (func / code, delay [, arg1, arg2 ...])

Az érvek jelentése ugyanaz. A setTimeouttól eltérően azonban nem egyszer indítja el a funkció végrehajtását, hanem rendszeresen megismétli azt egy meghatározott időközönként. A végrehajtást leállíthatja a következő telefonszámokkal:

ClearInterval (timerId)

A következő példa indításkor két másodpercenként üzenetet jelenít meg, amíg a Stop gombra nem kattint:

<input type = "button" onclick = "clearInterval (timer)" value = "(! LANG: Stop" > !} <script> var i = 1; var timer = setInterval ( függvény ()(riasztás (i ++)), 2000);script>

Hívások sorba állítása és átfedése a setInterval szolgáltatásban

A setInterval (függvény, késleltetés) meghívása a funkciót a megadott időintervallum után hajtja végre. De van itt egy finomság.

Valójában a hívások közötti szünet kevesebb, mint a megadott intervallum.

Vegyük például a setInterval (function () (func (i ++)), 100) értéket. Funkciót hajt végre 100 ms -onként, minden alkalommal növelve a számlálót.

Az alábbi képen a piros blokk a func végrehajtási ideje. A mondat közötti idő a funkció indítása közötti idő, és kevesebb, mint a beállított késleltetés!

Vagyis a böngésző szépen kezdeményezi a funkció elindítását 100 ms -onként, anélkül, hogy figyelembe venné a funkció végrehajtási idejét.

Előfordul, hogy egy funkció végrehajtása tovább tart, mint a késleltetés. Például a függvény bonyolult és a késleltetés kicsi. Vagy a függvény figyelmeztető / megerősítő / felszólító utasításokat tartalmaz, amelyek blokkolják a végrehajtási szálat. Ebben az esetben érdekes dolgok kezdődnek.

Ha a funkció nem indítható el, mert a böngésző elfoglalt, akkor sorba állítja és végrehajtja, amint a böngésző szabad.

Az alábbi kép szemlélteti, mi történik egy olyan funkcióval, amelynek végrehajtása sokáig tart.

A setInterval által kezdeményezett függvényhívás hozzáadódik a sorhoz, és azonnal megtörténik, amikor ez lehetségessé válik:

A függvény második futtatása közvetlenül az első vége után következik be:

A végrehajtás nem kerül sorba többször.

Ha egy függvény végrehajtása több ütemezett végrehajtásnál hosszabb ideig tart, akkor egyszer még mindig a sorban áll. Tehát nincs "felhalmozódás" az indításokról.

Az alábbi képen a setInterval megpróbálja végrehajtani a funkciót 200 ms -ban, és sorba rendezi a hívást. 300 ms és 400 ms után az időzítő újra felébred, de semmi sem megy keresztül.

A setInterval (függvény, késleltetés) meghívása nem garantál valódi késést a végrehajtások között.

Vannak esetek, amikor a tényleges késleltetés nagyobb vagy kisebb, mint a megadott. Általában nem tény, hogy legalább lesz valamilyen késés.

Beágyazott setTimeout ismétlése

Azokban az esetekben, amikor nem csak rendszeres ismétlésre van szükség, hanem késleltetésre van szükség az indítások között, a setTimeout minden funkció végrehajtásakor visszaáll.

Az alábbiakban egy példa látható, amely 2 másodperces időközönként riasztást ad ki.

<input type = "button" onclick = "clearTimeout (timer)" value = "(! LANG: Stop" > !} <script> var i = 1; var timer = setTimeout ( függvény futás ()(riasztás (i ++); timer = setTimeout (futás, 2000);), 2000);script>

A végrehajtási idővonalon rögzített késések lesznek a futások között. Illusztráció 100 ms késleltetéshez:

Minimális késleltetés

A böngésző időzítője a lehető legalacsonyabb késleltetéssel rendelkezik. A modern böngészőkben nulla és 4 ms között változik. Az idősebbeknél magasabb lehet, és elérheti a 15 ms -ot.

Alapértelmezés szerint a minimális késleltetés 4 ms. Tehát nincs különbség a setTimeout (.., 1) és a setTimeout (.., 4) között.

A nulla késleltetésű setTimeout és setInterval viselkedések böngésző-specifikusak.

1. Az Operában a setTimeout (.., 0) ugyanaz, mint a setTimeout (.., 4). Ritkábban fut, mint a setTimeout (.., 2). Ez a böngésző jellemzője.
2. Az Internet Explorerben a nulla késleltetésű setInterval (.., 0) nem fog működni. Ez kifejezetten vonatkozik a setInterval, azaz A setTimeout (.., 0) jól működik.

Tényleges válaszfrekvencia

A kiváltás sokkal ritkább lehet, egyes esetekben a késleltetés nem 4 ms, hanem 30 ms vagy akár 1000 ms.

A legtöbb böngésző (elsősorban asztali gép) továbbra is végrehajtja a setTimeout / setInterval végrehajtását, még akkor is, ha a lap inaktív. Ugyanakkor számos közülük (Chrome, FF, IE10) csökkenti az időzítő minimális frekvenciáját, másodpercenként 1 -szer. Kiderül, hogy a "háttér" lapon időzítő aktiválódik, de ritkán.

Akkumulátorról, laptopban történő futtatáskor - a böngészők is csökkenthetik a frekvenciát, hogy ritkábban hajtsák végre a kódot, és takarékoskodjanak az akkumulátor energiájával. Az IE különösen híres erről. A csökkentés akár többször is lehet, a beállításoktól függően. Ha a processzor terhelése túl nagy, előfordulhat, hogy a JavaScript nem tudja időben feldolgozni az időzítőket. Ezzel kihagyja a setInterval futások egy részét.

Következtetés: a 4 ms -os frekvenciának kell vezérelnie, de nem szabad ezzel számolnia.

Az intervallumok kiírása a konzolra A hívások közötti intervallumokat számoló kód valahogy így néz ki:

var timeMark = új dátum; setTimeout ( függvény go ()(var diff = new Date - timeMark; // újabb késleltetést nyomtat a konzolra az oldal helyett konzol .log (diff); // emlékezz az időre a végén, // a hívások közötti késleltetés pontos mérésére timeMark = új dátum; setTimeout (go, 100); ), 100);

A setTimeout (func, 0) trükk

Ez a trükk méltó a JavaScript -hackek évkönyvébe való belépéshez.

A függvény a setTimeout (func, 0) fájlba van csomagolva, ha az aktuális szkript vége után szeretné futtatni.

A lényeg az, hogy a setTimeout soha nem hajt végre azonnal egy funkciót. Csak a megvalósítását tervezi. De a JavaScript értelmező csak a jelenlegi szkript végrehajtása után kezdi el a tervezett funkciók végrehajtását.

Alapértelmezés szerint a setTimeout amúgy sem hajthat végre függvényt 0 késleltetéssel. De a legfontosabb itt az, hogy a végrehajtás mindenképpen az aktuális kód végrehajtása után történik.

Például:

var eredmény; függvény showResult ()(alert (eredmény);) setTimeout (showResult, 0); eredmény = 2 * 2; // nyomtatni fog 4

Teljes

A setInterval (func, delay) és setTimeout (func, delay) metódusok lehetővé teszik a func rendszeres / egyszeri futtatását késleltetés ezredmásodpercei után.

Mindkét módszer visszaadja az időzítő azonosítóját. A végrehajtás leállítására szolgál a clearInterval / clearTimeout meghívásával.

| | setInterval | setTimeout | || ----------- | ---------- | | Időzítés | A hívás szigorúan időzítőn van folyamatban. Ha a tolmács foglalt, egy hívás lép be a sorba. A függvény végrehajtási idejét nem veszik figyelembe, így az egyik futás végétől a másik elejéig eltelt időintervallum eltérő lehet. | A setTimeout rekurzív hívását használja a setInterval helyett, ahol rögzített szünetre van szükség a végrehajtások között. | | Késleltetés | Minimális késleltetés: 4 ms. | Minimális késleltetés: 4 ms. | | A böngésző jellemzői | A 0 késleltetés nem működik IE | -ben Az Operában a nulla késleltetés 4 ms-nak felel meg, más késleltetéseket pontosan kezelnek, beleértve a nem szabványos 1ms, 2ms és 3ms-t. |

A szkriptnyelveken történő programozás során időnként szünetet kell létrehozni - egy időre fel kell függeszteni a program végrehajtását, majd folytatni kell a munkát. Például a VBS és a PHP szkriptekben a következő módszerek lehetségesek:

VBS: wscript.sleep 1500 (leáll 1,5 másodpercre)

PHP: alvás (10); (álljon le 10 másodpercre)

Ilyen szünetek alatt a futásidejű rendszer (PHP vagy VBS) semmittevés... Az a fejlesztő, aki intuitív módon próbál ilyesmit használni a Javascriptben, kellemetlen meglepetést okoz. Egy tipikus hiba, amikor szünetet kíván létrehozni a Javascriptben, így néz ki:

Funkció badtest () (for (var i = 1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }

Gondolod, hogy amikor a cikluson áthaladva a következő számjegy rajzolására kerül sor, az setTimeoutőszintén leállítja a Javascript munkáját, várjon 0,9 másodpercet, adja hozzá a szükséges számot a beviteli mező végéhez, majd folytassa a munkát. De valójában nem az: setIntervalés setTimeout a Javascriptben csak a zárójelben megadott művelet (vagy függvény) késik. Példánkban a következők történnek:

1. i = 1;
2. halasztja az "1" szám hozzáadását a beviteli mezőhöz 0,9 másodperccel;
3. azonnal a probléma beállítása után a ciklus folytatódik: i = 2;
4. halasztja a "2" szám hozzáadását a beviteli mezőhöz 0,9 másodperccel;

Azonnal például 1 ms -ot jelent (azaz mérhetetlenül kicsi, 900 ms -hoz képest): a ciklus szinte azonnal elvégzi munkáját, és több függőben lévő feladatot hoz létre ugyanabból az időpontból. Ez azt jelenti, hogy az összes függőben lévő "rajzolási" feladatot szinte egyszerre kell elvégezni, az új számok hozzáadása közötti szünetek nélkül. A ciklus elindul; minden lefagy 0,9 másodpercig; és shirrr - minden számot egymás után lőnek.

És hogyan kell ilyen esetben helyesen alkalmazni setTimeout? Ez komplikált. Fel kell hívni a függvényt rekurzívan(a függvényen belül ugyanaz a funkció), és hogy ez a folyamat ne legyen végtelen, állítsa be a leállítási feltételt (például a nyomtatott szám értékét):

Funkció welltest () (ha (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }

És egy másik változó én függvényen kívül kell inicializálni - például így:

Most minden úgy működik, ahogy kell (a késleltetési időt 0,9 s -ról 0,4 s -ra csökkentettük). De az ilyen feladatokhoz logikusabb, ha nem setTimeout a setInterval(bár ehhez két funkció szükséges):

Funkció besttest () (window.i = 0 window.timer1 = window.setInterval ("draw ()", 400)) function draw () (document.getElementById ("test3"). Érték + = ++ i if (i > = 9) clearInterval (window.timer1))

A Javascirpt módszer jellemzője setInterval az a tény, hogy nem megy "magától", azt speciális módszerrel kell leállítani clearInterval... És hogy világos legyen, mit kell leállítani, a halasztott cselekvési feladathoz speciális azonosítót rendelnek - egy időzítőt: window.timer1 = window.setInterval (...).

A módszerrel létrehozott feladatokhoz azonosítókat is hozzá lehet rendelni setTimeout... Minden időzítő -azonosítónak különböznie kell egymástól (egyedi az aktuális böngészőablakban). Ezután több különböző feladatot hozhat létre az ablakban, amelyek halasztott műveleteket használnak, és ezeket a feladatokat párhuzamosan kell végrehajtani (hasonlóan egyidejűleg, ha a számítógép rendelkezik elegendő erőforrással), ami alapvetően lehetetlen PHP vagy VBS esetén.

Íme egy példa egy oldalra, amelyen több Javascript időzítő fut egyszerre: setinterval.htm (Javascript függvények a setinterval.js fájlban). Az összes időzítő működését (a menü kivételével) le lehet állítani az Esc billentyű megnyomásával. Minden példa időzítő "természetes" (nem absztrakt) i ++) visszaszámlálás - idő vagy távolság. Minden "órát" kifejezetten szinkronizáltak (az egyértelműség kedvéért). A távolság-alapú időzítők az "indikátor" és a legördülő (legördülő) menüben használatosak.

Legördülő menü

A kihúzható menünk valójában kihúzható (a "fejléc" alól): rések vannak az elemek között, hogy lássa, hogyan húzódik ki. Váratlanul kiderült, hogy nem tudunk ugyanolyan sima kilépést tenni a különböző hosszúságú listákról - valószínűleg a számítógép alacsony teljesítménye miatt (AMD Athlon 999 MHz).

Teljesen nyilvánvaló, hogy a szépség és a harmónia érdekében szükség van arra, hogy a különböző menüpontok listája egyszerre essen ki. Vagyis a hosszabb listáknak gyorsabban, a rövidebbeknek - alacsonyabb ütemben - ki kell esniük. Úgy tűnik, hogy ez a következőképpen valósítható meg:

1. Beállítottuk az "indulás" teljes idejét, például 200 ms.
2. Ha a legördülő lista magassága 20 px, akkor nyilvánvaló, hogy 10 ms -mal egy képponttal lejjebb tudjuk vinni - majd 200 ms múlva a teljes lista megjelenik.
3. Ha a legördülő menü 40 képpont magas, hogy egyszerre illeszkedjen, 5 ms -ban le kell mozgatnunk egy képponttal lejjebb.

E logika szerint, ha a legördülő lista 200 képpont magas, akkor azt 1 ms-onként egy képpel lefelé kell mozgatnunk. De ez a sebesség nem működik a számítógépünkön - a böngészőnek egyszerűen nincs ideje a lista új pozíciójának rajzolására egy ezredmásodperc alatt. Igen. A Javascriptnek van ideje számolni (mit kell számolni?), És a böngészőnek (Firefox) nincs ideje megjeleníteni. Tipikus helyzet a weben.

Ezért csak mankó segítségével lehet kiegyenlíteni a menüből való kilépés idejét, és még mindig nem világos, hogyan fog ez működni egy gyorsabb számítógépen. De a leglassabbra kell számítanunk, nem? Az algoritmus (a számítógép sebességének figyelembevétele nélkül) valahogy így alakul:

1. Beállítjuk a lista teljes kijelentkezési idejét: idő = 224 (ms).
2. A ciklus egy intervallumának minimális idejét állítjuk be: delay = 3 (ms).
3. Állítsa be a lista áthelyezésének minimális lépését: offset = 1 (px).
4. Mindezt a lista magasságától függően megváltoztatjuk: 1) növeljük a késleltetés (intervallum) idejét fordított arányban a magassággal és egyenes arányban a teljes időidővel (224 magasságban az együttható 1); 2) ha a magasság meghaladja a 40 px -t, növelje a minimális lépést a magassággal arányosan. A konstans "40" értéket empirikusan kapjuk a leglassabb számítógéphez. A Pentium 4 CPU 2,53 GHz -es számítógépen végzett tesztek pontosan ugyanazt a számot mutatták - 40. Ellenkező esetben az időzítők elvadulnak, a listák kilépnek a lépésekből.

Most a listák többé -kevésbé kibontakoznak. Többé -kevésbé hasonló ideig. A setinterval.htm oldalon.

És itt van Bru-bajusz:

Funkció slide_do (obj, maxtop, eltolás) (if (getTopLeft (obj) .top)< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }

Maga a funkció, amely beágyazott listákat hoz ki a menüből, mint látható, nagyon egyszerű. Már csak a következő sorral kell futtatni:

Ts.timer1 = setInterval (function () (slide_do (ts, maxtop, offset)), késleltetés)

Nos, mielőtt elkezdené, csak számolja ki ezeket a maxtopokat és eltolásokat, és tegye a listát a mintop pozícióba is. Mit csinál az "előzetes" funkció? dia () 40 sorban. És mindezt együtt - a setinterval.js fájlban. Igen, és ez a baromság nem fog működni a mellékelt stíluslap nélkül.