A szkriptnyelveken történő programozás során időről időre szünetet kell létrehozni - egy időre felfüggeszteni a program végrehajtását, majd folytatni a munkát. Például VBS és PHP szkriptekben a következő módszerek lehetségesek:
VBS: wscript.sleep 1500 (leállítás 1,5 másodpercre)
PHP: alvás(10); (állj meg 10 másodpercre)
Ezen szünetek alatt a futásidejű rendszer (PHP vagy VBS) semmittevés. Az a fejlesztő, aki intuitív módon próbál valami hasonlót használni a Javascriptben, kellemetlen meglepetés éri. Egy tipikus hiba, amikor szünetet próbál létrehozni a Javascriptben, így néz ki:
Függvény badtest() ( for (var i=1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }
Azt gondolja, hogy amikor a sor eléri a következő számjegy rajzolását a ciklus során, a setTimeout őszintén leállítja a Javascriptet, vár 0,9 másodpercet, hozzáadja a kívánt számjegyet a beviteli mező végéhez, majd folytatja a munkát. De valójában nem ez a helyzet: a setInterval és a setTimeout a Javascriptben csak késlelteti a zárójelben megadott művelet (vagy függvény) végrehajtását. Példánkban a következő fog történni:
Az azonnali kifejezés például 1 ms-ot jelent (vagyis aránytalanul kicsi a 900 ms-hoz képest): a hurok szinte azonnal elvégzi a munkáját, több függőben lévő feladatot létrehozva ugyanabban az időpontban. Ez azt jelenti, hogy az összes függőben lévő "rajzolási" feladatot szinte egy időben hajtják végre, anélkül, hogy szünetek kellenek az új számok hozzáadása között. A ciklus elindul; minden lefagy 0,9 másodpercre; és shirrr – minden számot egymás után lőnek ki.
És mi a helyes módja a setTimeout alkalmazásának ilyen esetben? Ez komplikált. Meg kell hívni a függvényt rekurzív módon(a függvény belsejéből ugyanaz a függvény), és hogy ez a folyamat ne legyen végtelen, állítson be egy stop feltételt (például a kinyomtatott szám értéke):
Függvény welltest() ( if (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }
És az i változót a 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 másodpercről 0,4 másodpercre csökkentettük). De az ilyen feladatokhoz logikusabb nem a setTimeout, hanem a setInterval használata (bár ehhez két funkcióra lesz szükség):
Függvény besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) függvény draw() ( document.getElementById("teszt3").value += ++i if (i >= 9) clearInterval(window.timer1) )
A Javascirpt setInterval metódus sajátossága, hogy nem megy át "magától", a speciális clearInterval metódussal kell leállítani. És hogy világos legyen, hogy pontosan mit kell leállítani, a halasztott művelethez egy speciális azonosítót rendelünk - egy időzítőt: window.timer1 = window.setInterval(...) .
A setTimeout metódussal létrehozott feladatokhoz azonosítók is rendelhetők. Minden időzítőazonosítónak különböznie kell egymástól (egyedinek kell lennie az aktuális böngészőablakban). Ezután az ablakban több különböző feladatot hozhat létre, amelyek függőben lévő műveleteket használnak, és ezek a feladatok párhuzamosan fognak végrehajtódni (például egyszerre, ha elegendő erőforrással rendelkezik a számítógép), ami PHP-ben vagy VBS-ben alapvetően lehetetlen.
Íme egy példaoldal, amelyen több Javascript időzítő fut egyszerre: setinterval.htm (Javascript függvények a setinterval.js-ben). Minden oldalidőzítő (a menük kivételével) leállítható az Esc billentyűvel. Minden példaidőzítő „természetes” (nem absztrakt i++) visszaszámláláson – időn vagy távolságon – alapul. Az összes "óra" kifejezetten nincs szinkronban (az egyértelműség kedvéért). A távolságfüggő időzítőket a "jelző" és a legördülő ("vezetés") menüben használják.
Legördülő menüKihúzható menünk valóban kihúzható (a „fejléc” alól): az elemek között hézagokat hagyunk, hogy lássuk, hogyan csúszik ki. Váratlanul kiderült, hogy nem tudunk egyformán zökkenőmentesen kilépni a különböző hosszúságú listákból - valószínűleg a számítógép alacsony teljesítménye miatt (AMD Athlon 999 MHz).
Nyilvánvaló, hogy a szépséghez és a harmóniához szükség van arra, hogy a különböző menüpontok listája egyszerre essen ki. Vagyis a hosszabb listáknak nagyobb arányban, a rövidebbeknek lassabban kell kiesnie. Úgy tűnik, hogy ezt így lehet megtenni:
Ezen logika szerint, ha a legördülő menü magassága 200 képpont, akkor 1 ms-onként egy képponttal lejjebb 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 egy ezredmásodperc alatt megrajzolni a lista új pozícióját. Igen. A Javascriptnek van ideje számolni (mit kell számolni?), De a böngészőnek (Firefox) nincs ideje megjeleníteni. Tipikus webes helyzet.
Ezért a menüből való kilépési idő többé-kevésbé kiegyenlítése csak mankók segítségével lehetséges, és egyelőre nem tudni, hogy ez hogyan fog működni egy gyorsabb számítógépen. De a leglassabbra kell számítanunk, igaz? Az algoritmus (a számítógép sebességének figyelembevétele nélkül) valahogy így alakul:
Most többé-kevésbé távoznak a listák. Többé-kevésbé ugyanannyi ideig. A setinterval.htm oldalon.
Itt van Bruce:
Függvény slide_do(obj, maxtop, offset) ( 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 a menüből kinyomja a beágyazott listákat, mint látjuk, nagyon egyszerű. Már csak valami ilyesmivel kell futtatni:
ts.timer1 = setInterval(function()(slide_do(ts, maxtop, offset)), késleltetés)
Nos, mielõtt futna, csak számolja ki ezeket a maxtopot és offseteket, és tegye a listát is mintop pozícióba. Ezt teszi a „preliminary” slide() függvény, amely 40 soros. És mindez együtt - a setinterval.js fájlban. Igen, és ez a baromság nem fog működni stíluslap nélkül.
A setInterval funkciót úgy tervezték, hogy rendszeres időközönként ismételten lefuttassa a kódot. Ennek azonban számos hátulütője van, főleg a különböző böngészőkben eltérő viselkedés.
Az első különbség az időzítő beállításának különbsége a következő futtatáshoz. Készítsünk egy kis tesztet: megmérjük, hogy mennyi idő telt el az előző futtatás kezdete és a vége óta.
var d1 = new Date(), d2 = new Date(); 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 a második sortól kezdve tájékoztató jellegű lesz.
A Firefox, az Opera, a Safari és a Chrome esetében a helyzet hasonló lesz: az első szám körülbelül 1000 lesz, a második pedig 200-zal kevesebb. A különbség csak az értékek terjedésében lesz. A legkisebb terjedés a Chrome-ban és az Operában.
2 PunBB válasza (szerkesztette: PunBB 2017.06.08. 16:45)
Egy másik, kevésbé észrevehető és nehezebben reprodukálható, de néha sok bajt okozó különbség a rendszeridő változásaival szembeni ellenállás. Ha lefuttatja a következő tesztet
setInterval(function() ( document.body.innerHTML = Math.random(); ), 500);
Indítás után pedig fordítsuk vissza egy perccel a rendszeridőt, majd a Firefox és Safari böngészőkben leáll a számok változása, és egy perc múlva újra indul. Természetesen a rendszeridő kézi fordítása rendkívül ritka helyzet, de sok rendszer úgy van beállítva, hogy automatikusan szinkronizálja az időt 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ó mínusza, hogy a működésének leállításához valahol emlékeznie kell az azonosítójára, ami nem mindig kényelmes.
3 PunBB válasza
A setInterval felsorolt hiányosságainak kiküszöböléséhez több setTimeout használható.
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ás közvetlenül az előző befejezése után van ütemezve.
A rekurzív setTimeout rugalmasabb időzítési módszer, mint a setInterval, mivel a következő végrehajtásig eltelt idő az aktuális eredményétől függően eltérően ütemezhető.
Például van egy szolgáltatásunk, amely 5 másodpercenként lekérdezi a szervert az új adatokért. Ha a szerver túlterhelt, növelheti a lekérdezési intervallumot 10, 20, 60 másodpercre... És visszaállíthatja, amikor minden visszatér a normál kerékvágásba.
Ha rendszeresen futtatunk processzortöltési feladatokat, akkor megbecsülhetjük a végrehajtásukra fordított időt, és előre vagy később tervezhetjük a következő indítást.
4 PunBB válasza
A rekurzív setTimeout garantálja a szünetet a hívások között, a setInterval nem.
Hasonlítsunk össze két kódot. Az első a setIntervalt használja:
var i = 1; setInterval(function() ( func(i); ), 100);
A második rekurzív setTimeoutot használ:
var i = 1; setTimeout(function run() ( func(i); setTimeout(run, 100); ), 100);
A setInterval segítségével a belső időzítő pontosan 100 ms-onként indul el, és meghívja a func(i)-t:
A tényleges szünet a func hívások között a setInterval mellett kisebb, mint a kódban megadott!
Ez természetes, mert a függvény futási idejét semmiképpen nem veszik figyelembe, az intervallum egy részét "megeszi".
Az is lehetséges, hogy a funkció bonyolultabbnak bizonyult, mint vártuk, és tovább tartott, mint 100 ms.
Ebben az esetben az értelmező 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 letelt), akkor azonnal megtörténik a következő hívás.
Ha a funkció a setInterval szünetnél tovább fut, akkor a hívások megszakítás nélkül történnek.
5 Válasz a sempai által
Minden az adott feladattól függ. Kezdetben a SetTimeOut az időzítő egyszeri elindítására szolgál, a SetInterval pedig a ciklus elindítására. De mindkét függvény használható a szkriptek közötti ciklusra, ha például rekurzívan fut a SetTimeOut függvényben, akkor gyakorlatilag a SetIntervalhoz hasonlóan fog működni.
A SetInterval mínusza jelenleg az, hogy nem veszi figyelembe magának a szkriptnek (függvénynek) a végrehajtási idejét, és ha például nehéz lekérdezésekre használja, akkor az intervallum ideje jelentősen lecsökken, és eltérő lehet a különböző böngészőkben.
De ismét, ha a funkció vagy a kérés minimálisra van csökkentve, akkor a végfelhasználó valószínűleg nem fogja érezni a különbséget.
Ezért, hogy mit használ, mindenki maga dönti el.
Rendkívül fontos megérteni a JavaScript időzítők működését. Gyakran viselkedésük nem esik egybe a többszálú intuitív felfogásunkkal, és ez annak a ténynek köszönhető, hogy valójában ugyanazon a szálon futnak. Nézzünk meg négy olyan funkciót, amelyekkel az időzítőket vezérelhetjük:
Ezen az ábrán meglehetősen sok információ található, amelyet meg kell emészteni, de ennek megértése mélyebben megértheti a JavaScript aszinkron végrehajtásának működését. ez a diagram az időt ezredmásodpercben ábrázolja függőlegesen, a kék négyzetek a végrehajtott JavaScript kód blokkjait mutatják. Például az első blokk átlagosan 18 ms alatt fut le, egy egérkattintás körülbelül 11 ms-ig blokkolja a végrehajtást, és így tovább.
A JavaScript csak egy kódrészletet tud végrehajtani (a végrehajtás egyszálas jellege miatt), mindegyik blokkolja más aszinkron események végrehajtását. Ez azt jelenti, hogy amikor egy aszinkron esemény történik (például egy egérkattintás, egy időzítő meghívása vagy egy XMLHttp-kérés befejeződik), az bekerül egy sorba, és később végrehajtódik (a megvalósítás természetesen böngészőnként változik, de nevezzük ezt "sor") .
Először képzeljük el, hogy két időzítő indul a JavaScript blokkon belül: a setTimeout 10 ms-os késleltetéssel és a setInterval ugyanilyen késleltetéssel. Attól függően, hogy az időzítő mikor indul, akkor indul el, amikor még nem fejeztük be az első kódblokkot. Megjegyzendő azonban, hogy nem tüzel azonnal (ez az egyszálasság miatt nem lehetséges). Ehelyett a halasztott funkció sorba kerül, és a következő elérhető időpontban kerül végrehajtásra.
Ezenkívül az első JavaScript blokk végrehajtása során egy egérkattintás történik. Ennek az aszinkron eseménynek a kezelője (és aszinkron, mert nem tudjuk megjósolni) jelenleg nem hajtható végre közvetlenül, így az is sorba kerül, akárcsak az időzítő.
A JavaScript kód első blokkjának végrehajtása után a böngésző felteszi magának a kérdést: "Mi vár a végrehajtásra?". Ebben az esetben az egérkattintáskezelő és az időzítő függő állapotban van. A böngésző kiválaszt ezek közül egyet (a kattintáskezelőt), és végrehajtja azt. Az időzítő megvárja a következő elérhető időt a végrehajtási sorban.
Vegye figyelembe, hogy miközben az egérkattintási kezelő fut, az első intervallum-visszahívás elindul. Csakúgy, mint az időzítő-visszahívás, ez is sorba kerül. Ne feledje azonban, hogy amikor az intervallum újra aktiválódik (miközben az időzítő visszahívás fut), eltávolítjuk a sorból. Ha az összes intervallum-visszahívás sorba kerülne, miközben egy nagy kódrészlet fut, az azt eredményezné, hogy egy csomó függvény várakozik a meghívásra, anélkül, hogy a végrehajtás vége között el kellene telnie. Ehelyett a böngészők hajlamosak megvárni, amíg nem marad függvény a sorban, mielőtt újabbat adna a sorhoz.
Így azt az esetet figyelhetjük meg, amikor az intervallum-visszahívás harmadik tüzelése egybeesik azzal a pillanattal, amikor már végrehajtódik. Ez egy fontos jellemzőt szemléltet: az intervallumokat nem érdekli az éppen futó, a végrehajtások közötti késleltetési időszaktól függetlenül felkerülnek a sorba.
Végül, miután a második intervallum-visszahívás befejeződött, azt látjuk, hogy a JavaScript-motornak már nincs mit végrehajtania. Ez azt jelenti, hogy a böngésző ismét új aszinkron eseményekre vár. Ez az 50 ms-nál fog megtörténni, ahol az intervallum-visszahívás újra aktiválódik. Abban a pillanatban nem lesz semmi, ami blokkolja, így azonnal működni fog.
Nézzünk egy példát, amely jól szemlélteti a setTimeout és a setInterval közötti különbséget.
setTimeout(function()( /* Néhány hosszú kódblokk... */ setTimeout(arguments.callee, 10); ), 10); setInterval(function()( /* Valami hosszú kódblokk... */ ), 10);
Ez a két lehetőség első pillantásra egyenértékű, de valójában nem az. A setTimeout kódot használó kódnak mindig legalább 10 ms késleltetése lesz az előző hívás után (lehet hosszabb is, de soha nem kevesebb), míg a setInterval kódot 10 ms-onként szokták hívni, függetlenül attól, hogy az előző hívás mikor ért véget.
Foglaljuk össze a fentieket:
- A JavaScript motorok egyszálú környezetet használnak, az aszinkron eseményeket végrehajtásra váró sorokká alakítják,
- setTimeout függvények A setInterval és a setInterval alapvetően eltérő módon hajtódnak végre aszinkron kódban,
- Ha az időzítő pillanatnyilag nem hajtható végre, késik a következő végrehajtási pontig (amely hosszabb lesz, mint a kívánt késleltetés),
- Az intervallumok (setInterval) egymás után, késedelem nélkül végrehajthatók, ha végrehajtásuk tovább tart, mint a megadott késleltetés.
Mindez rendkívüli fontos információ a fejlesztés érdekében. A JavaScript-motor működésének ismerete, különösen sok aszinkron esemény esetén (ami gyakran előfordul), nagyszerű alapot teremt a fejlett alkalmazások létrehozásához.
A JavaScript időtúllépése egy natív JavaScript-függvény, amely meghatározott időkésleltetés után (ezredmásodpercben) végrehajt egy kódrészletet. Ez akkor lehet hasznos, ha egy felugró ablakot szeretne megjeleníteni, miután a felhasználó eltöltött egy kis időt az oldalon. Vagy azt szeretné, hogy az elem fölé mutató hatás csak egy idő után futjon. Így elkerülhető, hogy a hatás akaratlanul is kiváltsa, ha a felhasználó véletlenül fölé ugrott.
Egy egyszerű setTimeout példaA funkció működésének bemutatásához vessünk egy pillantást a következő bemutatóra, amelyben a gombra kattintás után két másodperccel egy felugró ablak jelenik meg.
Demo megtekintése
SzintaxisAz MDN dokumentáció a következő szintaxist adja meg a setTimeout számára:
var timeoutID = window.setTimeout(func, ); var timeoutID = window.setTimeout(code, );
A fenti szintaxis a window.setTimeout fájlt használja. Miért?
Valójában a setTimeout és a window.setTimeout nagyjából ugyanaz a funkció. Az egyetlen különbség az, hogy a második kifejezésben a setTimeout metódust használjuk a globális ablak objektum tulajdonságaként.
Személy szerint úgy gondolom, hogy ez csak nagymértékben bonyolítja a kódot. Ha alternatívát határoznánk meg JavaScript módszer A prioritási sorrendben megtalálható és visszaküldhető időtúllépés még több problémába ütközne.
Nem akarok az oktatóanyag ablakobjektumával vacakolni, de általában rajtad múlik, hogy melyik szintaxist használod.
Példák a felhasználásraEz lehet egy függvénynév:
function explode()( alert("Boom!"); ) setTimeout(explode, 2000);
Egy függvényre utaló változó:
var explode = function()( alert("Boom!"); ); setTimeout(explode, 2000);
Vagy egy névtelen függvény:
setTimeout(function()( alert("Boom!"); ), 2000);
Vegye figyelembe azt is, hogy a JavaScript időtúllépési riasztási módszerét használjuk a kód tesztelésére.
Paraméterek átadása a setTimout-nakAz első (és szintén a böngészők közötti) opcióban paramétereket adunk át a visszahívási függvénynek, amely a setTimeout segítségével hajtódik végre.
A következő példában egy véletlenszerű üdvözlést nyerünk ki az üdvözlő tömbből, és paraméterként adjuk át a greet() függvénynek, amelyet a setTimeout 1 másodperces késleltetéssel hajt végre:
function greet(greeting)( console.log(greeting); ) function getRandom(arr)( return arr; ) var greetings = ["Hello", "Bonjour", "Guten Tag"], randomGreeting = getRandom(greetings); setTimeout(function()( greet(randomGreeting); ), 1000);
Demo megtekintése
Alternatív módszerA cikk elején található szintaxisban egy másik módszer is használható paraméterek átadására a JavaScript időtúllépése által végrehajtott visszahívási függvénynek. Ez a módszer magában foglalja az összes paraméter kimenetét a késleltetést követően.
Az előző példa alapján a következőket kapjuk:
setTimeout(üdvözlet, 1000, véletlenszerű üdvözlés);
Ez a módszer nem működik az IE 9 és régebbi verzióiban, ahol az átadott paramétereket a rendszer nem definiáltként kezeli. De van egy speciális polifill az MDN-en a probléma megoldására.
Kapcsolódó problémák és „ez”A setTimeout által végrehajtott kód az azt meghívó függvénytől külön fut. Emiatt bizonyos problémákkal szembesülünk, amelyekre megoldásként használhatjuk kulcsszó ez.
var person = ( keresztnév: "Jim", bevezetés: function()( console.log("Szia, én"m " + this.firstName); ) ); person.introduce(); // Kimenetek: Szia, én" m Jim setTimeout(person.introduce, 50); // Kimenetek: Szia, nem vagyok meghatározva
Ennek a kimenetnek az az oka, hogy az első példában ez a személy objektumra mutat, míg a második példában a globális ablak objektumra, amely nem rendelkezik firstName tulajdonsággal.
Ennek az ellentmondásnak a kiküszöbölése érdekében több módszert is használhat:
Ennek értékét erőltesseEz megtehető a bind() metódussal, amely egy új függvényt hoz létre, amely meghívásakor egy adott értéket használ a kulcs értékeként. Esetünkben a megadott személy objektum. Ennek eredményeként a következőket kapjuk:
setTimeout(person.introduce.bind(person), 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 "Funkció időtúllépési hiba" JavaScript futásidejű hiba jelenik meg, amikor alkalmazza.
Használja a KönyvtáratSzámos könyvtár beépített funkciókat tartalmaz a probléma megoldásához. Például a jQuery.proxy() metódus. Elvesz egy függvényt, és egy újat ad vissza, amely mindig egy bizonyos kontextust használ. A mi esetünkben a kontextus a következő lesz:
setTimeout($.proxy(person.introduce, person), 50);
Demo megtekintése
Kapcsolja ki az időzítőtA setTimeout visszatérési értéke egy numerikus azonosító, amely az időzítő letiltására használható a clearTimeout() függvény segítségével:
var timer = setTimeout(myFunction, 3000); clearTimeout(időzítő);
Lássuk működés közben. A következő példában, ha a "Visszaszámlálás indítása" gombra kattint, a visszaszámlálás elindul. Miután vége, a cicák megkapják a sajátjukat. De ha a Visszaszámlálás leállítása gombra kattint, a JavaScript időtúllépési időzítője leáll és visszaáll.
Példa megtekintése
ÖsszegezveA setTimeout egy aszinkron függvény, ami azt jelenti, hogy ennek a függvénynek a fogadott hívása bekerül a sorba, és csak akkor kerül végrehajtásra, ha a veremen végzett összes többi művelet befejeződött. Nem futhat párhuzamosan más függvényekkel vagy külön szálon.
A Window és Worker felületeken felkínált setInterval() metódus ismételten meghív egy függvényt vagy végrehajt egy kódrészletet, az egyes hívások közötti fix késleltetéssel. Egy intervallumazonosítót ad vissza, amely egyedileg azonosítja az intervallumot, így később eltávolíthatja a clearInterval() meghívásával. Ezt a módszert a WindowOrWorkerGlobalScope mixin határozza meg.
Szintaxis varintervalID = hatálya.setInterval( func, késleltetés, [arg1, arg2, ...]); varintervalID = hatálya.setInterval( kód, késleltetés); Paraméterek func Késleltetési ezredmásodpercenként végrehajtandó függvény. A függvény nem ad át argumentumot, és nem várható visszatérési érték. kód Az opcionális szintaxis lehetővé teszi, hogy egy karakterláncot adjon meg függvény helyett, amely lefordításra és végrehajtásra kerül minden késleltetési ezredmásodpercben. Ez a szintaxis az nem ajánlott ugyanazon okok miatt, amelyek miatt az eval() használata biztonsági kockázatot jelent. késleltetés Az az idő, ezredmásodpercben (ezredmásodpercben), ameddig 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 Nem kötelező További argumentumok, amelyek átadódnak a által megadott függvénynek func ha az időzítő lejár.Megjegyzés: A további argumentumok átadása a setInterval()-nak az első szintaxisban nem működik internet böngésző 9 és korábban. Ha engedélyezni szeretné ezt a funkciót az adott böngészőben, akkor polifill-t kell használnia (lásd a részt).
visszatérési értéketA visszaadott intervalID egy numerikus, nullától eltérő érték, amely azonosítja a setInterval() hívása által létrehozott időzítőt; ez az érték átadható az időtúllépés törléséhez.
Hasznos lehet tisztában lenni azzal, hogy a setInterval() és a setTimeout() ugyanazon az azonosítókészleten osztozik, és hogy a clearInterval() és clearTimeout() technikailag felcserélhetően használhatók. Az egyértelműség kedvéért azonban meg kell próbálnia ezeket mindig egyeztetni, hogy elkerülje a félreértést a kód karbantartása során.
Megjegyzés: A késleltetési argumentum előjeles 32 bites egész számmá alakul. Ez gyakorlatilag 2147483647 ms-ra korlátozza a késleltetést, mivel előjeles egész számként van megadva az IDL-ben.
Példák 1. példa: AlapszintaxisA következő példa a setInterval() "s alapvető szintaxisát mutatja be.
Var intervalID = window.setInterval(myCallback, 500, "1. paraméter", "2. paraméter"); function myCallback(a, b) ( // Az Ön kódja itt // A paraméterek nem kötelezőek. console.log(a); console.log(b); )
2. példa: Két szín váltakozásaA következő példa másodpercenként egyszer meghívja a flashtext() függvényt, amíg meg nem nyomják a Stop gombot.
setInterval/clearInterval példa var nIntervId; function changeColor() ( nIntervId = setInterval(flashText, 1000); ) function flashText() ( var oElem = document.getElementById("my_box"); oElem.style.color = oElem.style.color == "piros" ? " blue" : "red"; // oElem.style.color == "red" ? "blue" : "red" egy hármas operátor. ) függvény stopTextColor() ( clearInterval(nIntervId); )
Helló Világ
Állj meg 3. példa: Írógép szimulációA következő példa az írógépet szimulálja úgy, hogy először törli, majd lassan beírja a tartalmat a csomópontlistába, amely megfelel a kijelölők meghatározott csoportjának.
JavaScript írógép - MDN Példa függvény Írógép (sSelector, nRate) ( függvény clean () ( clearInterval(nIntervId); bTyping = false; bStart = true; oCurrent = null; aSheets.length = nIdx = 0; ) függvény scroll (oSheet, nPosheet , bEraseAndStop) ( if (!oSheet.hasOwnProperty("parts") || aMap.length< nPos) { return true; } var oRel, bExit = false; if (aMap.length === nPos) { aMap.push(0); } while (aMap < oSheet.parts.length) { oRel = oSheet.parts]; scroll(oRel, nPos + 1, bEraseAndStop) ? aMap++ : bExit = true; if (bEraseAndStop && (oRel.ref.nodeType - 1 | 1) === 3 && oRel.ref.nodeValue) { bExit = true; oCurrent = oRel.ref; sPart = oCurrent.nodeValue; oCurrent.nodeValue = ""; } oSheet.ref.appendChild(oRel.ref); if (bExit) { return false; } } aMap.length--; return true; } function typewrite () { if (sPart.length === 0 && scroll(aSheets, 0, true) && nIdx++ === aSheets.length - 1) { clean(); return; } oCurrent.nodeValue += sPart.charAt(0); sPart = sPart.slice(1); } function Sheet (oNode) { this.ref = oNode; if (!oNode.hasChildNodes()) { return; } this.parts = Array.prototype.slice.call(oNode.childNodes); for (var nChild = 0; nChild < this.parts.length; nChild++) { oNode.removeChild(this.parts); this.parts = new Sheet(this.parts); } } var nIntervId, oCurrent = null, bTyping = false, bStart = true, nIdx = 0, sPart = "", aSheets = , aMap = ; this.rate = nRate || 100; this.play = function () { if (bTyping) { return; } if (bStart) { var aItems = document.querySelectorAll(sSelector); if (aItems.length === 0) { return; } for (var nItem = 0; nItem < aItems.length; nItem++) { aSheets.push(new Sheet(aItems)); /* Uncomment the following line if you have previously hidden your elements via CSS: */ // aItems.style.visibility = "visible"; } bStart = false; } nIntervId = setInterval(typewrite, this.rate); bTyping = true; }; this.pause = function () { clearInterval(nIntervId); bTyping = false; }; this.terminate = function () { oCurrent.nodeValue += sPart; sPart = ""; for (nIdx; nIdx < aSheets.length; scroll(aSheets, 0, false)); clean(); }; } /* usage: */ var oTWExample1 = new Typewriter(/* elements: */ "#article, h1, #info, #copyleft", /* frame rate (optional): */ 15); /* default frame rate is 100: */ var oTWExample2 = new Typewriter("#controls"); /* you can also change the frame rate value modifying the "rate" property; for example: */ // oTWExample2.rate = 150; onload = function () { oTWExample1.play(); oTWExample2.play(); }; span.intLink, a, a:visited { cursor: pointer; color: #000000; text-decoration: underline; } #info { width: 180px; height: 150px; float: right; background-color: #eeeeff; padding: 4px; overflow: auto; font-size: 12px; margin: 4px; border-radius: 5px; /* visibility: hidden; */ }
CopyLeft 2012, Mozilla Developer Network
[ Játssz | szünet | Megszakítás]
Vivamus blandit massa ut metus mattis in fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim és lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt. JavaScript írógépLorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices dolor ac dolor imperdiet ullamcorper. Suspendisse quam libero, luctus auctor mollis sed, malesuada condimentum magna. Quisque in ante tellus, in placerat est. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec a mi magna, quis mattis dolor. Etiam sit amet ligula quis urna auctor imperdiet nec faucibus ante. Mauris vel consectetur dolor. Nunc eget elit eget velit pulvinar fringilla consectetur aliquam purus. Curabitur convallis, justo posuere porta egestas, velit erat ornare tortor, non viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat non ipsum.
Phasellus ac nisl lorem:
Nullam commodo suscipit lacus non aliquet. Phasellus ac nisl lorem, sed facilisis ligula. Nam cursus lobortis placerat. Sed dui nisi, elementum eu sodales ac, placerat sit amet mauris. Pellentesque dapibus tellus ut ipsum aliquam eu auctor dui vehicula. Quisque ultrices laoreet erat, at ultrices tortor sodales non. Sed venenatis luctus magna, Ultricies ultricies nunc fringilla eget. Praesent scelerisque urna vitae nibh tristique varius consequat neque luctus. Integer ornare, erat a porta tempus, velit justo fermentum elit, a fermentum metus nisi eu ipsum. Vivamus eget augue vel dui viverra adipiscing congue ut massa. Praesent vitae eros erat, pulvinar laoreet magna. Maecenas vestibulum mollis nunc in posuere. Pellentesque sit amet metus a turpis lobortis tempor eu vel tortor. Cras sodales eleifend interdum.
Duis lobortis sapien quis nisl luctus porttitor. In tempor semper libero, eu tincidunt dolor eleifend sit amet. Ut nec velit in dolor tincidunt rhoncus non non diam. Morbi auctor ornare orci, non euismod felis gravida, máshová nem sorolt. Curabitur elementum nisi a eros rutrum máshová nem sorolt blandit diam placerat. Aenean tincidunt risus ut nisi consectetur cursus. Ut vitae quam elit. Donec dignissim est in quam tempor consequat. Aliquam aliquam diam non felis convallis suscipit. Nulla facilisi. Donec lacus risus, dignissim et fringilla et, egestas veleros. Duis malesuada accumsan dui, és fringilla mauris bibStartum quis. Cras adipiscing ultricies fermentum. Praesent bibStartum condimentum feugiat.
Nam faucibus, ligula eu fringilla pulvinar, lectus tellus iaculis nunc, vitae scelerisque metus leo non metus. Proin mattis lobortis lobortis. Quisque accumsan faucibus erat, vel varius tortor ultricies ac. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec libero nunc. Nullam tortor nunc, elementum a consectetur et, ultrices eu orci. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque a nisl eu sem vehicula egestas.
visszahívási érvekAmint azt korábban tárgyaltuk, az Internet Explorer 9-es és korábbi verziói nem támogatják az argumentumok átadását a visszahívási függvénynek sem a setTimeout() vagy setInterval() függvényben. A következő IE-specifikus kód egy módszert mutat be ennek a korlátozásnak a leküzdésére. 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 argumentumok átadását a |*| javascript időzítők visszahívási funkciói (HTML5 szabványos szintaxis)..setInterval |*| https://weboldal/Felhasználó: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 = ablak.setInterval(kód, késleltetés); |*| \*/ if (document.all && !window.setTimeout.isPolyfill) ( var __nativeST__ = window.setTimeout; window.setTimeout = függvény (vCallback, nDelay /*, argumentToPass1, argumentToPass2 stb. */) ( var aArgs = Tömb .prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? function () ( vCallback.apply(null, aArgs); ) : vCallback, nDelay); ); window.setTimeout.isPolyfill = true; ) if (document.all && !window.setInterval.isPolyfill) ( var __nativeSI__ = window.setInterval; window.setInterval = függvény (vCallback, nDelay /*, argumentToPass1, argumentToPass2 stb. */) ( var aArgs = Array.prototype. slice.call(arguments, 2); return __nativeSI__(vCallback instanceof 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(function(arg1) ().bind(undefined, 10), 1000);
Inaktív lapokhoz Gecko 5.0 szükséges (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)A Gecko 5.0-tól (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2) kezdődően az intervallumok nem gyakrabban aktiválódnak, mint másodpercenként az inaktív lapokon.
Az "ez" problémaAmikor átad egy metódust a setInterval()-nak vagy bármely más függvénynek, akkor a program hibás értékkel hívja meg. Ezt a problémát részletesen a JavaScript hivatkozás ismerteti.
MagyarázatA setInterval() által végrehajtott kód külön végrehajtási környezetben fut, mint a függvény, amelyből meghívták. Ennek következtében a hívott függvény ez kulcsszója az ablak (vagy globális) objektumra van beállítva, nem egyezik meg a setTimeout függvény ez értékével. Lásd a következő példát (amely a setTimeout() függvényt 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 = függvény (sProperty) ( alert(arguments.length > 0 ? this : this); ); myArray.myMethod(); // kiírja a "zero,one,two" értéket myArray.myMethod(1); // kiírja az "egyet" setTimeout(myArray.myMethod, 1000); // 1 másodperc után kiírja a "" értéket setTimeout(myArray.myMethod, 1500, "1"); // 1,5 másodperc után kiírja az "undefined" kifejezést // a "this" objektum átadása a .call-al nem fog működni // mert ez megváltoztatja magának a setTimeout-nak az értékét // miközben a myArray-en belül szeretnénk megváltoztatni .myMethod // valójában ez egy hiba, mert a setTimeout kód ezt várja az ablak objektumként: setTimeout.call(myArray, myArray.myMethod, 2000); // hiba: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegális művelet a WrappedNative prototípus objektumon" setTimeout.call(myArray, myArray.myMethod, 2500, 2); // ugyanaz a hiba
Amint láthatja, nincs mód az objektum átadására a visszahívási függvénynek a régi JavaScriptben.
Egy lehetséges megoldásA " this " probléma megoldásának egy lehetséges módja a két natív setTimeout() vagy setInterval() globális függvény lecserélése kettőre. nem őshonos olyanokat, amelyek a Function.prototype.call metóduson keresztül lehetővé teszik a meghívást. A következő példa egy lehetséges cserét mutat be:
// Engedélyezze a "this" objektum áthaladását a JavaScript időzítőkön var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = függvény (vCallback, nDelay /*, argumentToPass1, argumentToPass2 stb. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback instanceof Function ? függvény () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); ); window.setInterval = függvény (vCallback, nDelay /*, argumentToPass1, argumentToPass2 stb. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback instanceof Function ? függvény () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); );
Ez a két csere lehetővé teszi tetszőleges argumentumok HTML5 szabvány szerinti átadását az IE időzítőinek visszahívási funkcióihoz. Tehát úgy is használhatók nem szabványos polifilleket is. Lásd az a szabványnak megfelelő polifill.
Új funkcióteszt:
MyArray = ["nulla", "egy", "kettő"]; myArray.myMethod = függvény (sProperty) ( alert(arguments.length > 0 ? this : this); ); setTimeout(alert, 1500, "Helló világ!"); // a setTimeout és a setInterval szokásos használata megmarad, de... setTimeout.call(myArray, myArray.myMethod, 2000); // kiírja a "zero,one,two" értéket 2 másodperc után setTimeout.call(myArray, myArray.myMethod, 2500, 2); // 2,5 másodperc után kiírja a "kettőt".
Egy összetettebb, de mégis moduláris változathoz ( Démon) lásd a JavaScript démonkezelést. Ez a bonyolultabb verzió nem más, mint egy nagy és méretezhető metódusgyűjtemény a Démon konstruktőr. Azonban a Démon maga a konstruktor nem más, mint egy klónja MiniDaemon kiegészített támogatással benneés Rajt a példányosítása során deklarált függvények démon. Így a MiniDaemon keretrendszer továbbra is az ajánlott módja az egyszerű animációknak, mert Démon módszergyűjteménye nélkül lényegében annak klónja.
minidaemon.js /*\ |*| |*| :: MiniDaemon:: |*| |*| 2. verzió – 2014. szeptember 26.setInterval |*| https://weboldal/Felhasználó:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| Ez a keretrendszer a GNU Lesser General Public License 3-as vagy újabb verziója alatt került kiadásra. |*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function MiniDaemon (oOwner, fTask, nRate, nLen) ( if (!(this && this instance of MiniDaemon)) ( return; ) if (arguments.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 metódusok */ MiniDaemon.forceCall = függvény (oDmn) ( oDmn.INDEX += oDmn.BACKW ? -1: 1; if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn .BACKW) === false || oDmn.isAtEnd()) ( oDmn.pause(); return false; ) return true; ); /* Példányok metódusai */ MiniDaemon.prototype.isAtEnd = függvény () ( return this.BACKW ? isFinite(this.length) && this.INDEX< 1: this.INDEX + 1 >this.length; ); MiniDaemon.prototype.synchronize = function () ( if (this.PAUSED) ( return; ) clearInterval(this.SESSION); this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this); ); MiniDaemon.prototype.pause = függvény () ( clearInterval(this.SESSION); this.PAUSED = igaz; ); MiniDaemon.prototype.start = függvény (bReverse) ( var bBackw = Boolean(bReverse); if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) ( return; ) this.BACKW = bBackw; this.PAUSED = false; this.synchronize(); );A MiniDaemon argumentumokat ad át a visszahívási függvénynek. Ha olyan böngészőkkel szeretne dolgozni, amelyek natívan nem támogatják ezt a funkciót, használja a fent javasolt módszerek egyikét.
Szintaxisvar myDaemon = new MiniDaemon( ezt az objektumot, visszahív[ , mérték [, hossz]]);
Leírás Használati megjegyzésekA setInterval() függvényt gyakran használják az újra és újra végrehajtott függvények, például az animációk késleltetésének beállítására. Az intervallumot a WindowOrWorkerGlobalScope.clearInterval() segítségével törölheti.
Ha szeretné, hogy a függvény meghívódjon egyszer a megadott késleltetés után használja a .
Késleltetési korlátozásokLehetséges az intervallumok egymásba ágyazása; vagyis a setInterval() visszahívása meghívhatja a setInterval() függvényt, hogy egy másik intervallumot indítson, még akkor is, ha az első még tart. A lehetséges hatások mérséklése érdekében teljesítmény, ha az intervallumok öt szintnél mélyebbre vannak ágyazva, a böngésző automatikusan 4 ms-os minimális értéket kényszerít ki az intervallumra.
A böngészők bizonyos körülmények között még szigorúbb minimális értékeket kényszeríthetnek ki az intervallumra, bár ezek nem lehetnek általánosak. Vegye figyelembe azt is, hogy a tényleges idő, amely a visszahívás hívásai között eltelik, hosszabb lehet, mint a megadott késleltetés; Példákért lásd a WindowOrWorkerGlobalScope.setTimeout()-ban 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ágaHa fennáll annak a lehetősége, hogy a logika végrehajtása hosszabb ideig tart, mint az intervallumidő, akkor javasoljuk, hogy rekurzív módon hívjon meg egy elnevezett függvényt a setTimeout() segítségével. Például, ha a setInterval() segítségével 5 másodpercenként lekérdez egy távoli kiszolgálót, a hálózati késés, a nem válaszoló kiszolgáló és számos egyéb probléma megakadályozhatja, hogy a kérés a megadott időben teljesítsen. Emiatt előfordulhat, hogy sorba állított XHR-kérelmekkel találkozhat, amelyek nem feltétlenül jönnek vissza sorrendben.
