Informazioni su come utilizzare i timer JavaScript. SetTimeOut e SetInterval, che è meglio di vikory in JavaScript? Non mettere in gioco un vikonanny più di una volta

Golovna / Contatti

Il timeout JavaScript è una funzione JavaScript nativa che termina una parte di codice dopo che è stato impostato un ritardo (in millisecondi). Questo può tornare utile se hai bisogno di visualizzare la finestra che si sta svuotando dopo aver trascorso un'ora sulla tua pagina. Oppure è necessario che l'effetto quando il cursore viene posizionato su un elemento inizi dopo una certa ora. In questo modo puoi evitare l'effetto di lancio indesiderato se passi il cursore nella direzione sbagliata.

Impostazione semplice Timeout

Per dimostrare questa funzionalità, dai un'occhiata a questa demo, che mostra una finestra pop-up due secondi dopo aver premuto il pulsante.

Lasciati stupire dalla demo

Sintassi

La documentazione MDN fornisce la seguente sintassi per setTimeout:

var timeoutID = window.setTimeout(funzione, ); var timeoutID = window.setTimeout(codice, );

  • timeoutID – ID numerico, che può essere selezionato immediatamente da clearTimeout() per abilitare il timer;
  • func – funzione, che è la funzione di vikonan;
  • codice ( nella sintassi alternativa) – riga di codici necessaria per i visconati;
  • ritardo – durata del ritardo in millisecondi dopo l'avvio della funzione. Per gli articoli promozionali è impostato il valore 0.

setTimeout rispetto a window.setTimeout

La sintassi più comunemente utilizzata è window.setTimeout. Perché?

In effetti, setTimeout e window.setTimeout sono praticamente la stessa funzione. L'unica differenza è che in un'altra versione utilizziamo il metodo setTimeout come autorità dell'oggetto finestra globale.

Apprezzo particolarmente il fatto che questo renda il codice ancora più complicato. Yakbi mi vyznachili metodo alternativo Il timeout JavaScript, che potrebbe essere trovato e impostato in ordine di priorità, incorrerebbe in problemi ancora più grandi.

In questo caso non voglio occuparmi dell’oggetto finestra, ma in generale sei tu a decidere quale sintassi utilizzare.

Applicare vikoristannya

Questa può essere chiamata una funzione:

funzione esplodere())( alert("Boom!"); ) setTimeout(esplodere, 2000);

Modifica, man mano che si espande nella funzione:

var esplodere = funzione())( alert("Boom!"); ); setTimeout(esplodere, 2000);

O una funzione anonima:

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

  • Tale codice è poco conosciuto, ma sarà difficile modernizzarlo o migliorarlo;
  • Passa una variabile al metodo eval(), che può avere un potenziale impatto;
  • Questo metodo costa più di altri, quindi devi correre Interprete JavaScript.

Tieni inoltre presente che per testare il tuo codice utilizziamo il metodo di avviso per il timeout JavaScript.

Parametri passati a setTimout

Innanzitutto ( prima di ciò, cross-browser) Facoltativamente passiamo i parametri alla funzione callback, seguita da setTimeout.

Nell'applicazione corrente, vediamo un ciclo passo passo attraverso l'array di saluti e lo passiamo come parametro alla funzione greet(), che imposta setTimeout su un timeout di 1 secondo:

funzione saluto(saluto)( console.log(saluto); ) funzione getRandom(arr)( return arr; ) var saluti = ["Ciao", "Bonjour", "Guten Tag"]; setTimeout(funzione())(greet(randomGreeting); ), 1000);

Lasciati stupire dalla demo

Metodo alternativo

La sintassi precedente prevede un altro metodo, oltre al quale è possibile passare parametri alla funzione di callback del timeout JavaScript. Questo metodo tiene conto dell'identificazione di tutti i parametri che si verificano dopo l'essiccazione.

Nascondendoci sul calcio anteriore, togliamo:

setTimeout(saluto, 1000, randomSaluto);

Questo metodo non verrà utilizzato in IE 9 e versioni precedenti, i parametri trasmessi verranno trattati come unfine . Ale per il problema più importante MDN è un polyfill speciale.

Problemi correlati e “questo”

Il codice dietro setTimeout viene eseguito accanto alla funzione che attiva le chiamate. In questo modo veniamo alle prese con problemi comuni, i cui versetti possono essere superati parola chiave Questo.

var persona = ( firstName: "Jim", introduce: function())( console.log("Ciao, sono " + this.firstName); ) ); person.introduce(); // Risultati: Ciao, io " m Jim setTimeout(person.introduce, 50); // Output: Ciao, non sono definito

La ragione di ciò è che nella prima applicazione porta all'oggetto persona e nell'altra applicazione punta all'oggetto finestra globale, che ha l'autorità di firstName.

Per ridurre il costo dell'incoerenza, è possibile accelerare il processo utilizzando diversi metodi:

Primusovo ha impostato il valore

Puoi usare l'aiuto di bind(), il metodo che crea nuova funzione, yak sotto vikliku yak il valore della chiave che significa questo brano vikoristuya. Nella nostra versione, il significato dell'oggetto è persona. Di conseguenza, questo ci dà:

setTimeout(person.introduce.bind(persona), 50);

Nota: il metodo di associazione delle visualizzazioni in ECMAScript 5, il che significa che viene utilizzato solo in browser attuali. In altri, quando sei congelato, togli la misericordia di Vikonanny JavaScript "errore di timeout della funzione".

Biblioteca di Vicory

Molte librerie includono funzioni aggiuntive necessarie per problemi avanzati con questo sistema. Ad esempio, il metodo jQuery.proxy(). Prendi la funzione e la trasformi in una nuova, che avrà sempre un contesto diverso. Il nostro contesto sarà:

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

Lasciati stupire dalla demo

Interruttore temporizzatore

Il valore di setTimeout è sostituito da un ID numerico, che può essere utilizzato per abilitare un timer utilizzando la funzione aggiuntiva clearTimeout():

var timer = setTimeout(miaFunzione, 3000); clearTimeout(timer);

Guardiamola in azione. Ai piedi del calcio, premere il pulsante " Inizia il conto alla rovescia"Il gateway inizierà ad apparire. Una volta finita la guerra, i gattini perdono il loro. Basta premere il pulsante "". Interrompi il conto alla rovescia", il timer di timeout di JavaScript verrà annullato e reimpostato.

Meravigliati del sedere

Riassumiamo le buste

setTimeout è una funzione asincrona, il che significa che l'esecuzione di questa funzione viene consumata nel disegno e verrà eseguita solo dopo aver completato la decisione sullo stack. Non possiamo lavorare con altre funzioni contemporaneamente e teniamo il passo con il flusso.

  • Visualizzazione:
  • Registrato: 2014.07.08
  • Messaggi: 3,896
  • Piace: 497

Argomento: SetTimeOut e SetInterval, che è meglio del wikiwriting in JavaScript?

Per eseguire il codice più volte a intervalli regolari, all'ora viene assegnata una funzione setInterval. Ci sono anche una serie di svantaggi, principalmente lo stesso comportamento in diversi browser.

La prima responsabilità dipende dal momento in cui viene impostato il timer per il lancio imminente. Facciamo un breve test: aspettiamo qualche ora tra l'inizio e la fine.

var d1 = Nuova data(), d2 = Nuova data(); setInterval(function() ( var d = New Date(); document.body.innerHTML += (d - d1) + " " + (d - d2) + "
// Metti un segno sull'intestazione della funzione d1 = new Date(); while (nuova data() - d1< 200); // ничего не делаем 200 миллисекунд // И в конце функции d2 = new Date(); }, 1000);

Il riepilogo sarà informativo, a partire da un'altra riga.

In Firefox, Opera, Safari e Chrome la situazione sarà simile: il primo numero è approssimativamente uguale a 1000, l'altro - 200 in meno. La vitalità sarà meno importante. Chrome e Opera hanno i minori problemi.

2 Rispondi di PunBB (modificato da PunBB 2017.06.08 16:45)

  • Visualizzazione: Mosca, Sovkhoznay 3, app. 98
  • Registrato: 2014.07.08
  • Messaggi: 3,896
  • Piace: 497

Un'altra opzione è meno evidente e più aperta, ma a volte è possibile impostare molti turbo, ma è resistente alla modifica dell'orologio di sistema. Come eseguire un test offensivo

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

І dopo l'avvio, modificare l'ora del sistema alla stessa ora Browser Firefox E Safari cambierà i numeri e ricomincerà. Naturalmente, la modifica manuale dell'orologio di sistema è una situazione rara, ma sui sistemi ricchi è prevista la sincronizzazione automatica dell'orologio con i server su Internet, quindi in alcune situazioni questo fattore non può essere escluso.

Un altro piccolo svantaggio della funzione setInterval è che per poterla ripetere è necessario ricordarne l'identificatore, cosa che viene fatta manualmente.

3 Rispondi di PunBB

  • Visualizzazione: Mosca, Sovkhoznay 3, app. 98
  • Registrato: 2014.07.08
  • Messaggi: 3,896
  • Piace: 497

Ri: SetTimeOut e SetInterval, che è meglio di vikory in JavaScript?

Per evitare un'assicurazione eccessiva con setInterval, puoi utilizzare setTimeout.

Un'alternativa importante a setInterval è il setTimeout ricorsivo:

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

In questo caso, il finale successivo viene pianificato immediatamente dopo il completamento del precedente.

setTimeout ricorsivo è un metodo di temporizzazione più complesso di setInterval; le poche ore prima della data di inizio possono essere pianificate in diversi modi, a seconda del risultato effettivo.

Ad esempio, abbiamo un servizio che testa il server per 5 secondi alla ricerca di nuovi dati. Come server Revantage, puoi aumentare l'intervallo di campionamento a 10, 20, 60 secondi... E poi tornare indietro quando tutto ritorna alla normalità.

Poiché sottoponiamo regolarmente i nostri processori a lavori di manutenzione, possiamo stimare il tempo impiegato su di essi e pianificare il prossimo lancio prima o poi.

4 Rispondi di PunBB

  • Visualizzazione: Mosca, Sovkhoznay 3, app. 98
  • Registrato: 2014.07.08
  • Messaggi: 3,896
  • Piace: 497

Ri: SetTimeOut e SetInterval, che è meglio di vikory in JavaScript?

setTimeout ricorsivo garantisce una pausa tra le chiamate, setInterval no.

Confrontiamo i due codici. Primo setVikoristIntervallo:

var io = 1; setInterval(funzione() (funzione(i);), 100);

Un altro setTimeout ricorsivo di Wikorist:

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

Con setInterval, il timer interno è impostato esattamente su 100 ms e fare clic su func(i):

La pausa reale tra le chiamate alla funzione con setInterval è inferiore a quella specificata nel codice!

Questo è naturale, anche durante il funzionamento la funzione non è coperta, “mangia” parte dell'intervallo.

È anche possibile che la funzione sia risultata complessa, fossimo meno assicurati e sia risultata più lunga, inferiore a 100 ms.

In questo caso, l'interprete attenderà fino al completamento della funzione, quindi controllerà il timer e, se la chiamata setInterval è già scaduta (o è passata), la chiamata successiva avverrà immediatamente.

Se la funzione è specificata sopra, al di sotto della pausa setInterval, le chiamate verranno ripetute senza interruzione.

5 Rispondi di senpai

  • Visualizzazione: Gerusalemme
  • Registrato: 2015.06.02
  • Messaggi: 958
  • Piace: 274

Ri: SetTimeOut e SetInterval, che è meglio di vikory in JavaScript?

Tutto deve essere conservato nell'area di stoccaggio designata. SetTimeOut viene utilizzato per avviare un timer una volta e SetInterval viene utilizzato per avviare un ciclo. In alternativa è possibile utilizzare entrambe le funzioni per eseguire script ciclicamente, ad esempio eseguirli in modo ricorsivo con la funzione SetTimeOut, anch'essa pratica allo stesso modo di SetInterval.

Lo svantaggio di SetInterval al momento è che non ci vuole tempo per cancellare lo script (funzione) stesso e, se lo usi per query importanti, l'ora dell'intervallo accelera rapidamente e in alcuni browser potrebbe essere preso in giro .

Se lo ripeto ancora, se la funzione è ridotta a icona, allora Kintseviy spozhivach Difficilmente riesco a notare la differenza.
Perché vikorystuvat, la pelle virishaya stessa

Dzherelo: http://learn.javascript.ru/settimeout-setinterval

Quasi tutte le implementazioni di JavaScript hanno un timer di pianificazione interno, che consente di impostare la chiamata della funzione attraverso le attività per un periodo di tempo.

Zokrema, questa funzionalità è supportata nei browser e nei server Node.JS.

setTimeout

Sintassi:

var timerId = setTimeout(funzione/codice, ritardo[, arg1, arg2...])

parametri:

  • funzione/codice
    • Funzione o riga di codice per viconn.
    • La riga viene mantenuta per coerenza, vikorystvovat non è raccomandato.
  • ritardo
    • Ritardo in millisecondi, 1000 millisecondi equivalgono a 1 secondo.
  • argomento1, argomento2…
    • Argomenti che devono essere passati alla funzione. Non supportato in IE9-.
    • Questa funzione verrà attivata entro un'ora, in base al parametro di ritardo.

Ad esempio, il codice di attacco richiama alert("Hello") in un secondo:

funzione funzione()(alert("Ciao");) setTimeout(funzione, 1000);

Se il primo argomento è una riga, l'interprete crea una funzione anonima da quella riga.

Quindi un record del genere funziona in questo modo:

SetTimeout("avviso("Ciao")", 1000);

Sostituiscili con funzioni anonime:

ImpostaTimeout( funzione()(avviso (“Ciao”)), 1000);

Parametri per la funzione e il contesto

In tutti i browser moderni che eseguono IE10, setTimeout consente di specificare i parametri della funzione.

L'esempio seguente mostra "Ciao, sono Vasya" tramite IE9-:

funzione dire Ciao (chi)(alert("Ciao, io" + chi); ) setTimeout(sayCiao, 1000, "Vasya");

...Tuttavia, nella maggior parte dei casi abbiamo bisogno del supporto del vecchio IE, che non ci permette di specificare gli argomenti. Per trasmetterli, avvolgi il clic in una funzione anonima:

funzione dire Ciao (chi)(alert("Ciao sono" + chi); ) setTimeout( funzione()(dì Ciao ("Vasya")), 1000);

Viklik non passa il contesto this tramite setTimeout.

Zokrem, chiamando il metodo dell'oggetto tramite setTimeout richiede il contesto globale. Ciò potrebbe portare a risultati errati.

Ad esempio, utilizzando user.sayHi() in un secondo:

funzione Utente (id) funzione()(avviso(questo .id); ); ) var utente = nuovo Utente(12345); setTimeout(utente.sayCiao, 1000); // sveglia 12345, tranne "undefinito"

Come risultato di setTimeout, esegui la funzione user.sayHi nel contesto globale, impedendo l'accesso all'oggetto attraverso di essa.

Altrimenti, sembra che due clic di setTimeout siano gli stessi:

// (1) una riga setTimeout(user.sayHi, 1000); // (2) lo stesso per due righe var funz = utente.sayHi; setTimeout(funzione, 1000);

Fortunatamente questo problema può essere facilmente risolto anche dalla funzione perineale:

funzione Utente (id)(questo .id = id; questo .sayHi = funzione()(avviso(questo .id); ); ) var utente = nuovo Utente(12345); setTimeout( funzione()(utente.sayHi(); ), 1000);

La funzione wrapper viene modificata per passare argomenti tra browser e salvare il contesto wiki.

Skasuvannya Vikonannya

La funzione setTimeout ruota il timerId che può essere utilizzato per l'attività associata.

Sintassi:

ClearTimeout(timerId)

Impostiamo un timeout per l'applicazione corrente, quindi la eliminiamo (abbiamo cambiato idea). Di conseguenza, non succede nulla.

var timerId = setTimeout( funzione()(avviso(1)), 1000); clearTimeout(timerId);

setInterval

Il metodo setInterval ha una sintassi simile a setTimeout.

var timerId = setInterval(funzione/codice, ritardo[, arg1, arg2...])

Il senso delle argomentazioni è lo stesso. Tuttavia, nella subroutine setTimeout, avvia la funzione specificata più di una volta e la ripete regolarmente a intervalli di un'ora. Zupiniti vikonannya può essere wiklik:

ClearInterval(timerId)

All'avvio, il calciolo visualizzerà un avviso sulla pelle per due secondi finché non si preme il pulsante "Stop":

<tipo di input ="pulsante" onclick ="clearInterval(timer)" valore ="Stop" > !}!} <scrittura > var io = 1; var timer = setInterval( funzione()(avviso(i++)), 2000);scrittura >

Al diavolo l'overhead della chiamata per setInterval

Fare clic su setInterval (funzione, ritardo) per impostare la funzione da visualizzare dopo un intervallo di un'ora. Ma qui c'è sottigliezza.

Infatti la pausa tra le chiamate è più breve, inferiore all'intervallo.

Ad esempio, prendiamo setInterval(function() ( func(i++) ), 100) . Vaughn riduce la funzione cutanea di 100 ms, molto maggiore del valore del medico.

Sul piccolo in basso, il tassello rosso: questa è l'ora della funzione viconica. Ora tra i blocchi: almeno un'ora tra il lancio delle funzioni e, come minimo, il blocco è installato di seguito!

In questo caso il browser avvia il lancio della funzione skin care per 100 ms senza impostare l'orario di cessazione della funzione stessa.

È probabile che il completamento della funzione selezionata richieda più di un'ora. Ad esempio, la funzione è pieghevole e la chiusura è piccola. Oppure la funzione può utilizzare operatori di avviso/conferma/richiesta per bloccare il flusso di messaggi. Ed è qui che iniziano tutte le chiacchiere.

Dato che l'avvio della funzione è difficile perché il browser è occupato, rimane nera e si chiude non appena si apre il browser.

Le immagini seguenti illustrano ciò che è necessario per la funzione che coinvolge le icone a lungo termine.

La chiamata alla funzione, che avvia setInterval , viene aggiunta nel passaggio successivo e viene invocata in modo sicuro quando possibile:

È previsto un altro lancio della funzione subito dopo il completamento della prima:

Non mettere in gioco un viconny più di una volta.

Se una funzione specifica richiede più di un'ora, meno del numero di attività pianificate, il costo è una tantum. Inoltre non viene generato il “cumulo” delle partenze.

Nell'immagine seguente, setInterval consente di disabilitare la funzione 200 ms e fare clic su di essa. A 300 ms e 400 ms il timer si reimposta nuovamente, ma non succede nulla.

Il clic setInterval (funzione, ritardo) non garantisce un ritardo della finestra reale.

Ci sono eccezioni quando l'arresto reale è maggiore o minore di quello previsto. Non è un dato di fatto che vorrai qualsiasi tipo di rifinitura.

Ripeti setTimeout nidificato

Nei casi in cui è necessario non solo ripetere regolarmente, ma anche eseguire un allenamento regolare tra un avvio e l'altro, è possibile reinstallare setTimeout quando si seleziona la funzione.

Di seguito è riportato il calcio, che appare come un avviso a intervalli di 2 secondi tra loro.

<tipo di input ="pulsante" onclick ="clearTimeout(timer)" valore ="Stop" > !}!} <scrittura > var io = 1; var timer = setTimeout( funzione esegui()(alert(i++); timer = setTimeout(run, 2000); ), 2000);scrittura >

I ritardi tra i lanci verranno registrati sulla sequenza temporale dello spettacolo. Illustrazione per la dissolvenza di 100 ms:

Ritardo minimo del timer

Il timer del browser provoca un ritardo minimo. Varia da circa zero a 4 ms nei browser attuali. Nelle persone anziane può essere maggiore e raggiungere i 15 ms.

Il ritardo minimo standard è 4 ms. Pertanto, non esiste alcuna differenza tra setTimeout(..,1) e setTimeout(..,4) .

Il comportamento di setTimeout e setInterval con ritardo zero è specifico del browser.

  1. Opera, setTimeout(.., 0) - uguale a setTimeout(.., 4) . Questo verrà aggiunto per primo, sotto setTimeout(.. ,2). Questa è la particolarità di questo browser.
  2. U Internet Explorer La clausola nulla setInterval(.., 0) non funziona. SetInterval stesso ne vale la pena. setTimeout(.., 0) funziona correttamente.

Frequenza reale delle richieste

L'applicazione potrebbe essere molto più breve: per alcuni episodi il ritardo potrebbe non essere di 4 ms, ma di 30 ms o addirittura di 1.000 ms.

La maggior parte dei browser (desktop in particolare) può impostare setTimeout / setInterval in modo che siano disabilitati se la scheda è inattiva. In questo caso, alcuni di essi (Chrome, FF, IE10) riducono la frequenza minima del timer a 1 volta al secondo. Si scopre che il deposito "in background" ha un timer, ma raramente.

Quando sono alimentati a batteria, i browser di un laptop possono anche ridurre la frequenza di salvataggio del codice prima che venga salvato e per risparmiare la carica della batteria. Soprattutto cym vidomy IE. La riduzione può essere ottenuta più volte a seconda della regolazione. Se il processore è molto carico, JavaScript potrebbe non essere in grado di reimpostare immediatamente i timer. Con questa azione, le esecuzioni di setInterval verranno saltate.

Nota: dovresti concentrarti sulla frequenza di 4 ms, ma non preoccuparti.

Visualizzazione degli intervalli sulla console Il codice che determina gli intervalli orari tra le chiamate è simile a questo:

var timeMark = Nuova data; setTimeout( funzione vai()(var diff = nuova data - timeMark; // invia il dannato oggetto alla console invece che alla barra laterale consolle. log(diff); // ricordiamo l'ora proprio così, // per cambiare lo sfondo tra le chiamate timeMark = nuova data; setTimeout(vai, 100); ), 100);

Il trucco è setTimeout(func, 0)

Questo trucco dovrebbe essere relegato negli annali degli hack JavaScript.

La funzione è racchiusa con setTimeout(func, 0) se si desidera eseguirla al termine dello script threaded.

La cosa giusta è che setTimeout non influisce sulle funzioni dello schermo. Questo è tutto ciò che Vikonanny intende fare. Tuttavia l'interprete JavaScript non interromperà più le funzioni pianificate dopo l'esecuzione dello script threaded.

Secondo lo standard, setTimeout di solito non può impostare la funzione su un ritardo pari a 0. Come abbiamo detto prima, imposta il ritardo su 4 ms. Ahimè, ecco gli stessi che il Vikonanny sarà, in ogni caso, dopo il Vikonanny del codice di flusso.

Per esempio:

risultato var; funzione mostrarisultato()(alert(risultato); ) setTimeout(showResult, 0); risultato = 2 * 2; // vivede 4

Insieme

I metodi setInterval(func, ritardo) e setTimeout(func, ritardo) consentono di eseguire func regolarmente/una volta dopo un ritardo di millisecondi.

Esistono due metodi per ruotare l'ID del timer. Yogo vikorist per zupinka vikonannya wiklicom clearInterval/clearTimeout.

| | setIntervallo | setTimeout | || ----------- | ---------- | | Tempi | Ide viklik rigorosamente dietro il timer. Come interprete delle lezioni, un clic va sprecato. L'ora di completamento di questa funzione non è coperta, quindi l'intervallo tra la fine di una corsa e l'inizio di un'altra può variare. | La chiamata ricorsiva setTimeout viene sostituita da setInterval dove è richiesta una pausa tra le righe. | | Spegnimento Spegnimento minimo: 4ms. | Ritardo minimo: 4ms. | | funzionalità del browser | In IE il ritardo 0 non funziona, in Opera il ritardo zero equivale a 4 ms, i valori di ritardo vengono calcolati esattamente, inclusi 1 ms, 2 ms e 3 ms non standard. |

IL setInterval() metodo, estensioni alle interfacce finestra e lavoratore, chiama ripetutamente una funzione o esegue uno snippet di codice, con un ritardo di tempo fisso tra ogni chiamata. Questo si trasforma nell'ID dell'intervallo, che identifica chiaramente l'intervallo in modo che tu possa andare a quel termine usando callinterval() . Questo metodo è assegnato al mixin WindowsOrWorkerGlobalScope.

Sintassi

ID intervallo var = scopo.setInterval( funz, ritardo, [arg1, arg2, ...]); ID intervallo var = scopo.setInterval( codice, ritardo);

Parametri

func Una funzione da eseguire ogni millisecondo di ritardo. Questa funzione non è ripetuta da alcun pensiero, e nemmeno da un rinnovato significato o da una rivelazione. code Con l'opzione di sintassi aggiuntiva, puoi abilitare string al posto di function, che è pieghevole e con una skin diversa pari a milioni di dollari. La sintassi di Tsey è non consigliato per le stesse ragioni che rendono l'uso di eval() un rischio per la sicurezza. ritardo Il tempo, in millisecondi (migliaia di due), con cui il timer deve ritardare tra le esecuzioni della funzione o del codice specificato. Premere i valori di ritardo sui dettagli. arg1, ..., argN Facoltativo Argomenti aggiuntivi passati alla funzione specificata da funz una volta scaduto il timer.

Nota: il passaggio di argomenti aggiuntivi prima di setInterval() nella prima sintassi non funziona in Internet Explorer 9 e versioni precedenti. Se vuoi aggiungere questa funzionalità al browser, devi utilizzare un polyfill (vedi la sezione).

Valore di ritorno

Update intervalID è un valore numerico diverso da zero che identifica il timer creato dalla chiamata a setInterval() ; questo valore può essere passato per annullare il timeout.

Può essere efficace impostare setInterval() e setTimeout() condividano lo stesso pool di ID e clearInterval() e clearTimeout() possono tecnicamente essere utilizzati in modo intercambiabile. Per chiarezza, tuttavia, è tua responsabilità assicurarti di corrisponderlo per evitare confusione se stai mantenendo il codice.

Nota: L'argomento ritardo viene convertito in un intero con segno a 32 bit. La somma di questi termini effettivi dà come risultato 2147483647 ms, che è ciò che VIN rappresenta come identificatore in IDL.

Esempi

Esempio 1: sintassi di base

Questi esempi dimostrano la sintassi di base di setInterval().

Var intervalID = window.setInterval(myCallback, 500, "Parametro 1", "Parametro 2"); function myCallback(a, b) ( // Il tuo codice qui // I parametri sono puramente facoltativi. console.log(a); console.log(b); )

Esempio 2: alternanza di due colori

Per ulteriori informazioni sulla funzione flashtext() una volta al secondo finché non viene premuto il pulsante Stop.

esempio setInterval/clearInterval

Ciao mondo

Esempio 3: Simulazione di una macchina da scrivere

Forward Butts simula la macchina da scrivere cancellando e quindi digitando lentamente in NodeList il contenuto che corrisponde a un gruppo specificato di selettori.

Macchina da scrivere JavaScript - Esempio MDN

CopyLeft 2012 della rete di sviluppatori Mozilla

[ Giocare | Pausa | Terminare ]

Vivamus blandit massa ut metus mattis y fringilla lectus imperdiet. Proin ac ante a felis ornare vehicula. Fusce pellentesque lacus vitae eros convallis ut mollis magna pellentesque. Pellentesque placerat enim at lacus ultricies vitae facilisis nisi fringilla. In tincidunt tincidunt tincidunt.

Macchina da scrivere JavaScript

Lorem 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, no viverra justo diam eget arcu. Phasellus adipiscing fermentum nibh ac commodo. Nam turpis nunc, suscipit a hendrerit vitae, volutpat nen ipsum.

Phasellus ac nisl lorem:

Duis lobortis sapien quis nisl luctus porttitor. U period sempre 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 nec. Curabitur elementum nisi a eros rutrum nec 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 facile. Donec lacus risus, dignissim et fringilla et, egestas vel eros. Duis malesuada accumsan dui, y 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 acccsan 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.

Argomenti di richiamata

Come notato in precedenza, Internet Explorer 9 non supporta più il passaggio di argomenti alla funzione callback in setTimeout() o setInterval() . Il seguente Specifico per IE Cody dimostra un metodo per superare questa connessione. Per diventare vikorist, accelera il codice successivo nella finestra dello script in alto.

/*\ |*| |*| Polyfill specifico di IE che consente il passaggio di argomenti arbitrari al |*| funzioni di callback dei timer javascript (sintassi standard HTML5)..setInterval |*| https://sito/Utente:fusionchess |*| |*| Sintassi: |*| var timeoutID = window.setTimeout(func, delay[, arg1, arg2, ...]); |*| var timeoutID = window.setTimeout(codice, ritardo); |*| var intervalID = window.setInterval(func, delay[, arg1, arg2, ...]); |*| var intervalID = window.setInterval(codice, ritardo); |*| \*/ if (document.all && !window.setTimeout.isPolyfill) ( var __nativeST__ = window.setTimeout; window.setTimeout = funzione (vCallback, nDelay /*, argomentoToPass1, argomentoToPass2, ecc. */) ( var aArg .prototype .slice.call(arguments, 2); if (document.all && !window.setInterval.isPolyfill) ( var __nativeSI__ = window.setInterval; window.setInterval = function (vCallback, nDelay /*, argomentoToPass1, argomentoToPass2, ecc. * /) ( var aArgs = Ar slice.call(argomenti, 2);

Esistono altre opzioni per utilizzare funzioni anonime per richiamare la richiamata, il che è un po' più costoso. Esempio:

Var intervalID = setInterval(function() ( myFunc("uno", "due", "tre"); ), 1000); var intervalID = setInterval(function(arg1) ().bind(unfined, 10), 1000);

Schede inattive

Richiede Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2)

A partire da Gecko 5.0 (Firefox 5.0 / Thunderbird 5.0 / SeaMonkey 2.2), i termini sono bloccati per attivarsi non più spesso di una volta al secondo nelle schede inattive.

Il problema "questo".

Se passi il metodo a setInterval() o qualsiasi altra funzione, non avrai bisogno di inserire alcuna voce con valori simili. Questa nutrizione è discussa in dettaglio nel riferimento JavaScript.

Spiegazione

Il codice eseguito da setInterval() viene eseguito in un contesto di esecuzione separato rispetto alla funzione da cui è stato chiamato. Infine, questa parola chiave per questa funzione è impostata su un oggetto finestra (o globale) che non è sé stesso, così come il valore per la funzione chiamata setTimeout . Premi sul lato destro (che è setTimeout() invece di setInterval() – questo vale per tutti i timer):

MyArray = ["zero", "uno", "due"]; myArray.myMethod = funzione (sProperty) ( alert(arguments.length > 0 ? this : this); ); mioArray.mioMetodo(); // Stampa "zero,uno,due" myArray.myMethod(1); // Stampa "uno" setTimeout(myArray.myMethod, 1000); // Stampa "" dopo 1 secondo setTimeout(myArray.myMethod, 1500, "1"); // stampa "unDefinito" dopo 1,5 secondi // passare l'oggetto "this" con .call non funzionerà // perché questo cambierà il valore di this all'interno di setTimeout stesso // mentre vogliamo cambiare il valore di this all'interno di myArray .myMethod // infatti, colpevole ma errato per il codice setTimeout si aspetta che questo sia l'oggetto finestra: setTimeout.call(myArray, myArray.myMethod, 2000); // errore: "NS_ERROR_XPC_BAD_OP_ON_WN_PRO oggetto" setTimeout.call(myArray , myArray. myMethod, 2500, 2); // stesso errore

Come puoi vedere, non ci sono modi per passare questo oggetto a una funzione di callback in JavaScript.

Una possibile soluzione

È possibile completare il tutto sostituendo due funzioni naturali: setTimeout() o setInterval() con due non nativo quelli che ne abilitano l'invocazione tramite il metodo Function.prototype.call. L'esempio seguente mostra una possibile sostituzione:

// Ti permette di andare a "questo" oggetto tramite timer JavaScript var __nativeST__ = window.setTimeout, __nativeSI__ = window.setInterval; window.setTimeout = funzione (vCallback, nDelay /*, argomentoToPass1, argomentoToPass2, ecc. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeST__(vCallback in? () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); ); window.setInterval = funzione (vCallback, nDelay /*, argomentoToPass1, argomentoToPass2, ecc. */) ( var oThis = this, aArgs = Array.prototype.slice.call(arguments, 2); return __nativeSI__(vCallback in () ( vCallback.apply(oThis, aArgs); ) : vCallback, nDelay); );

Queste due sostituzioni creano anche il passaggio HTML5 standard di argomenti arbitrari ai timer delle funzioni di callback in IE. Quindi possono essere usati come non conforme agli standard anche i polyfill. Vedi per a conforme agli standard polyfill

Test delle nuove funzionalità:

MyArray = ["zero", "uno", "due"]; myArray.myMethod = funzione (sProperty) ( alert(arguments.length > 0 ? this : this); ); setTimeout(avviso, 1500, "Ciao mondo!"); // Gli standard wikisetTimeout e setInterval vengono conservati, ma... setTimeout.call(myArray, myArray.myMethod, 2000); // Stampa "zero,one,two" dopo 2 secondi setTimeout.call(myArray, myArray.myMethod, 2500, 2); // Stampa "due" dopo 2,5 secondi

Per una versione più complessa ma comunque modulare ( Demone) JavaScript JavaScript Gestione dei demoni . Questa versione più grande non dispone di una gamma ampia e ampia di metodi per Demone costruttore. comunque, il Demone self builder non è altro che un clone di MiniDaemon con un ulteriore supporto per dentro E onstart funzioni istanziazione dichiarabile del demone . Così il MiniDaemon framework rimane il metodo consigliato per animazioni semplici, Perché Demone senza questa raccolta di metodi ne è chiaramente un clone.

minidaemon.js

/*\ |*| |*| :: MiniDaemon:: |*| |*| Revisione n. 2 - 26 settembre 2014.setInterval |*| https://sito/Utente:fusionchess |*| https://github.com/madmurphy/minidaemon.js |*| |*| Questo framework è protetto dalla GNU Lesser General Public License, versione 3 o successiva. |*| http://www.gnu.org/licenses/lgpl-3.0.html |*| \*/ function MiniDaemon (oOwner, fTask, nRate, nLen) ( if (!(questo && questa istanza di 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 = Infinito; /* Queste proprietà dovrebbero essere di sola lettura */ MiniDaemon.prototype.SESSION = -1; MiniDaemon.prototype.INDEX = 0; MiniDaemon.prototype.PAUSED = vero; MiniDaemon.prototype.BACKW = vero; /* Metodi globali */ MiniDaemon.forceCall = funzione (oDmn) (oDmn.INDEX += oDmn.BACKW ? -1: 1; if (oDmn.task.call(oDmn.owner, oDmn.INDEX, oDmn.length, oDmn . .BACKW) === false || oDmn.isAtEnd()) ( oDmn.pause(); /* Metodi delle istanze */ MiniDaemon.prototype.isAtEnd = function () ( return this.BACKW ? isFinite(this.length) && questo.INDICE< 1: this.INDEX + 1 >questa.lunghezza; ); MiniDaemon.prototype.synchronize = funzione () ( if (this.PAUSED) ( return; ) clearInterval(this.SESSION); this.SESSION = setInterval(MiniDaemon.forceCall, this.rate, this); ); MiniDaemon.prototype.pause = funzione () (clearInterval(this.SESSION); this.PAUSED = true; ); MiniDaemon.prototype.start = funzione (bReverse) ( var bBackw = Boolean(bReverse); if (this.BACKW === bBackw && (this.isAtEnd() || !this.PAUSED)) ( return; ) this.BACKW = bBackw;this.PAUSED = false;this.synchronize(); );

MiniDaemon passa gli argomenti alla funzione di callback. Se desideri lavorare con browser che non supportano naturalmente questa funzionalità, prova uno dei metodi esposti.

Sintassi

var mioDaemon = Nuovo MiniDaemon( thisObject, richiamare[ , valutare [, lunghezza]]);

Descrizione

Note sull'utilizzo

La funzione SetInterval() viene in genere utilizzata per impostare azioni per funzioni quali caratteri e animazioni. Puoi attivare l'ora utilizzando WindowsOrWorkerGlobalScope.clearInterval() .

Se desideri che la tua funzione venga chiamata una volta dopo il ritardo specificato, utilizzare .

Restrizioni sui ritardi

Ciò è possibile per i termini che sono neutri; tuttavia, il callback per setInterval() può essere a sua volta chiamato setInterval() per avviare l'esecuzione di un altro termine, a seconda di quale dei due andrà per primo.Prestazioni, una volta che gli intervalli sono nidificati oltre i cinque livelli di profondità, il browser applicherà automaticamente un valore minimo di 4 ms per l'intervallo.

I browser potrebbero sapere restituire valori minimi più rigorosi per un termine in determinate circostanze, senza causare alcuna confusione. Si noti inoltre che il tempo effettivo che trascorre tra le chiamate alla richiamata potrebbe essere più lungo del ritardo specificato; Selezionare Motivi per ritardi più lunghi di quelli specificati in WindowOrWorkerGlobalScope.setTimeout() per gli esempi.

Assicurarsi che la durata dell'esecuzione sia inferiore alla frequenza dell'intervallo

È possibile che il tuo logico riesca a terminare la prova in meno di un'ora, il che significa che hai una chiamata ricorsiva e che la funzione setTimeout() è stata impostata. Ad esempio, di regola, setInterval() su un server remoto dura 5 secondi, un termine marginale, su un server invisibile e un host di altri può confermare il completamento in quest'ora difficile. In tal caso, potresti scoprire che hai bisogno del consumo XHR che devi aggiornare in ordine.

È molto importante capire come funzionano i timer JavaScript. Molto spesso, questo comportamento non sfugge ai nostri sentimenti intuitivi riguardo alla ricchezza del flusso, e ciò è dovuto al fatto che in realtà si uniscono in un unico flusso. Diamo un'occhiata ad alcune delle funzioni che possiamo utilizzare con i timer:

  • var id = setTimeout(fn, ritardo); - Crea un semplice timer che attiva questa funzione dopo un determinato esercizio. La funzione ruota l'ID univoco, che può essere utilizzato per ritardare il timer.
  • var id = setInterval(fn, ritardo); - Simile a setTimeout, ma chiama continuamente la funzione a un intervallo specificato (fino a quando non viene annullata).
  • clearInterval(id);, clearTimeout(id); - Riceve l'ID del timer (attiva una delle funzioni sopra descritte) e imposta l'icona di richiamata "a".
L'idea principale, come puoi vedere, è che la precisione del periodo di ritardo del timer non è garantita. Ciò è dovuto al fatto che il browser esegue tutti i processi JavaScript asincroni in un thread (come clic del mouse e timer) e solo nel momento in cui è prevista l'azione. Ciò è meglio dimostrato dal seguente diagramma:

Ci sono molte informazioni che devi comprendere per comprendere meglio i meccanismi asincroni di JavaScript. In questo diagramma, che rappresenta verticalmente l'ora in millisecondi, i blocchi blu mostrano i blocchi di codice JavaScript immessi. Ad esempio, il primo blocco viene visualizzato dal target in 18 ms e un clic del mouse viene bloccato dal target in circa 11 ms.

JavaScript può racchiudere solo un pezzo di codice (grazie alla natura a thread singolo del wiki), che blocca il wiki da altri processi asincroni. Ciò significa che quando viene attivato un processo asincrono (come un clic del mouse, un clic del timer o il completamento di una richiesta XMLHttp), viene aggiunto al programma e completato successivamente (l'implementazione, ovviamente, varia. È bloccato nel browser, ma chiamiamolo semplicemente in un altro modo).

È chiaro che nel mezzo del blocco JavaScript vengono avviati due timer: setTimeout con un ritardo di 10 ms e setInterval con lo stesso ritardo. È importante che l'avvio del timer avvenga nel momento in cui il primo blocco di codice non è stato ancora completato. Tieni presente, tuttavia, che non utilizza lo stesso thread (non tramite threading singolo). Inoltre, la funzione “spreca” e viene salvata nel momento disponibile.

Inoltre, nell'ora del primo blocco JavaScript, viene cliccato il target. Il processore di questo processo asincrono (ed è asincrono, quindi non possiamo trasferirlo) non può essere avviato immediatamente in questo momento, quindi anch'esso viene perso nel gioco, come il timer.

Successivamente, come primo blocco di codice JavaScript, il browser pone la seguente domanda: "Che aspetto ha?". In questo caso, il registratore di clic di destinazione e il timer si trovano nella stazione di ripristino. Il browser ne seleziona uno (rilevatore di clic) e lo seleziona. Il timer verrà impostato sulla parte dell'ora attualmente disponibile.

Tieni presente che mentre il rilevatore di clic target sta terminando, viene richiesto il primo intervallo di richiamata. Quindi, proprio come la richiamata del timer, verrà consegnata al rivenditore. Tuttavia, stai certo che se l'intervallo viene eseguito nuovamente (fino al termine del timer-callback), verrà eliminato dalla tabella. Come se tutti gli intervalli di callback fossero sprecati mentre un'enorme porzione di codice veniva finalizzata, il che porterebbe alla creazione di un insieme di funzioni che controlleranno le chiamate senza periodi di ritardo tra il completamento della loro finalizzazione. rifiuta il controllo finché non perdi prima la tua funzione vitale, aggiungine un altro al posto successivo.

In questo modo possiamo evitare conseguenze negative se a questo punto si evita la terza applicazione di interval-callback, se sta già terminando. Ciò illustra una caratteristica importante: non esistono intervalli per quelli che finiscono contemporaneamente, verranno aggiunti alla fine senza regolare il periodo di recupero tra i finali.

Una volta completato l'altro interval-callback, siamo sicuri che nulla sia andato perduto, che il motore JavaScript sia colpevole di errore. Ciò significa che il browser controlla nuovamente la comparsa di nuove applicazioni asincrone. Questo verrà impostato su 50 ms e l'intervallo di richiamata ricomincerà. In questo momento non ci sarà nulla che lo bloccherà, quindi lo chiederà con urgenza.

Diamo un'occhiata a un esempio che illustra meglio la differenza tra setTimeout e setInterval.
setTimeout(function())( /* Un lungo blocco di codice... */ setTimeout(arguments.callee, 10); ), 10); setInterval(function())( /* Un lungo blocco di codice... */ ), 10);
Queste due opzioni a prima vista sono equivalenti, ma in realtà non lo sono. Il codice che utilizza setTimeout ritarderà sempre 10 ms dopo la prima chiamata (può essere più grande, ma non può mai essere più piccolo), mentre il codice che imposta Interval ritarderà le chiamate ogni 10 ms. Questo è importante se hai eseguito la chiamata frontale.

Riassumiamo tutto quanto detto:
- I motori JavaScript hanno un middleware a thread singolo, trasformando i processi asincroni nel nucleo di Wikonny,
- Funzioni setTimeout e setInterval è definito diversamente nel codice asincrono,
- Poiché il timer non può essere avviato in questo momento, verrà ritardato fino al punto di inizio (poiché sarà dovuto al ritardo),
- Gli intervalli (setInterval) possono essere selezionati uno per uno senza ritardi, poiché il loro completamento richiede più di un'ora senza ritardi.

Tutto è soprannaturale Informazioni importanti per svelare. Sapere come funziona il motore JavaScript, soprattutto con un gran numero di processi asincroni (che spesso falliscono), costituisce una buona base per incoraggiare ulteriori sviluppi.

© 2022 androidas.ru - Tutto su Android