Come mettere in pausa un intervallo in JavaScript?

Nel processo di implementazione di varie funzionalità allo stesso tempo, è necessario disabilitare una particolare funzionalità per un po 'di tempo. Questo aiuta a osservare il funzionamento di ciascuna funzionalità. A volte, è necessario visualizzare una funzionalità specifica per un tempo definito e quindi disabilitarla. In tali casi, mettere in pausa un intervallo in JavaScript è di grande aiuto per far fronte a tali situazioni.

Come mettere in pausa un intervallo in JavaScript?

I seguenti approcci possono essere utilizzati in combinazione con "setInterval ()"Metodo per mettere in pausa un intervallo in JavaScript:

• "Valore booleano" approccio.
• IL "jQuery" approccio.
• "ClearInterval ()" metodo.

Approccio 1: mettere in pausa un intervallo in JavaScript usando il metodo setInterval () con approccio al valore booleano

IL "setInterval ()"Il metodo chiama una particolare funzione a intervalli specificati ripetutamente. Questo approccio può essere implementato per assegnare un particolare valore booleano alla funzione da accedere.

Sintassi

setInterval (funzione, millisecondi)

Nella sintassi sopra:

• "funzione"Si riferisce alla funzione da eseguire e"millisecondi"È l'intervallo di tempo.

Esempio

Per dimostrare questo, creare un documento HTML e posizionare le seguenti righe al suo interno:

= "Head"> Seconds:



Riprendere
Pausa

Nel codice sopra:

• All'interno del "Tag, includi il "arco"Elemento per includere i secondi da trascorrere.
• Successivamente, crea due pulsanti con l'allegato "al clic"Reindirizzamento dell'evento a due funzioni separate.
• Uno dei pulsanti creati comporterà la pausa l'intervallo e l'altro lo riprenderà.

Ora, nella parte JavaScript del codice:

Varget = documento.getElementById ("testa");
var pausa = false;
var elasedtime = 0;
var t = setInterval (function ()
Se(!pausa)
ElutedTime ++;
Ottenere.InnerText = "Seconds Eluted:" + ElutedTime;

, 1000);
functionResumeInterval ()
pausa = false;

functionPauseInterval ()
pausa = vero;

Nel frammento di codice sopra:

• Accedi al "arco"Elemento dal suo specificato"id" usando il "documento.getElementById ()" metodo.
• Nel passaggio successivo, assegna un valore booleano "falso" al "in pausa"Variabile. Allo stesso modo, inizializza la variabile "tempo trascorso" con "0"Per incrementarlo.
• Ora, applica il "setInterval ()"Metodo alla funzione e incremento del tempo trascorso inizializzato sotto forma di secondi in quanto l'intervallo è impostato su (1000 millisecondi = 1 secondo)
• Nel passaggio successivo, dichiarare una funzione denominata "curriculum ()". Qui, assegna il valore booleano come "falso"Alla variabile precedentemente assegnata"in pausa". Ciò comporterà la ripresa dell'intervallo in pausa sul clic del pulsante.
• Allo stesso modo, definisci una funzione chiamata "pauseInterval ()"Che metterà in pausa l'intervallo impostato assegnando anche il valore booleano come discusso.

Produzione

Nell'output di cui sopra, si può osservare che il requisito desiderato è soddisfatto.

Approccio 2: mettere in pausa un intervallo in JavaScript usando il metodo setInterval () con l'approccio jQuery

Questo approccio può essere implementato per accedere direttamente al pulsante, allegare un evento e assegnare un valore booleano.

Sintassi

setInterval (funzione, millisecondi)

Nella sintassi sopra:

• "funzione"Si riferisce alla funzione da eseguire e"millisecondi"È l'intervallo di tempo.

Esempio

Il seguente codice-Snippet ha dimostrato il concetto:

= "Head"> Seconds:



Riprendere
Pausa

Nel codice sopra:

• In primo luogo, includi il "jQuery" biblioteca.
• Nel passaggio successivo, ravviva l'approccio discusso per includere il "arco"Elemento per accumulare"Secondi" dentro.
• Successivamente, allo stesso modo, includi due pulsanti separati per fare una pausa e riprendere l'intervallo in pausa.

Nella parte di jQuery, passare attraverso le seguenti righe del codice:

var get = $ ('span');
var pausa = false;
var elasedtime = 0;
var t = finestra.setInterval (function ()
Se(!pausa)
ElutedTime ++;
Ottenere.testo ("secondi trascorsi:" + tempo trascorso);

, 1000);
$ (".pausa').on ('click', function ()
pausa = vero;
);
$ (".giocare').on ('click', function ()
pausa = false;
);

Nel codice sopra, seguire i passaggi indicati:

• Prendere il "arco"Elemento indicando il"elementi" nome.
• Nell'ulteriore codice, allo stesso modo, allocare un valore booleano al "in pausa"Variabile e inizializza il tempo trascorso con"0".
• Ora, ravviva l'approccio discusso per l'applicazione del "setInterval ()"Metodo alla funzione e allo stesso modo incrementare il tempo trascorso sotto forma di secondi.
• Infine, attacca il “clic"Evento di entrambi i pulsanti accessibili e assegnare il valore booleano dichiarato a ciascuno dei pulsanti usando il jQuery"SU()" metodo.

Produzione

Nell'output sopra offerto, è evidente che il timer viene messo in pausa e ripresa con successo.

Approccio 3: mettere in pausa un intervallo in JavaScript usando il metodo setInterval () con metodo ClearInterval ()

IL "ClearInterval ()"Il metodo cancella il timer set nel metodo setInterval (). Questo metodo può essere utilizzato per mettere in pausa l'intervallo impostato "permanentemente".

Sintassi

setInterval (funzione, millisecondi)

Nella sintassi sopra:

• "funzione"Si riferisce alla funzione da eseguire e"millisecondi"È l'intervallo di tempo impostato.

ClearInterval (intervallo)

Nella sintassi sopra:

• "intervallo"Si riferisce all'intervallo restituito dal metodo setInterval ()

Esempio

Passare attraverso le righe del codice dichiarate:

= "head" style = "font-weight: grassetto;"> secondi:



Pausa

• Qui, ripeti i passaggi discussi nei metodi precedenti per includere il "arco"Elemento.
• Nel passaggio successivo, allo stesso modo, crea un pulsante con un "al clic"Evento che invoca la funzione pauseInterval ().

Eseguire i passaggi indicati nella parte JavaScript del codice:

Varget = documento.getElementById ("testa");
var elasedtime = 0;
var t = setInterval (function ()
ElutedTime ++;
Ottenere.InnerText = "Seconds Eluted:" + ElutedTime;
, 1000);
functionPauseInterval ()
ClearInterval (T);

• Nel primo passo, allo stesso modo, accedi al "arco"Elemento per il suo"id" usando il "documento.getElementById ()" metodo.
• Ripeti i metodi discussi per inizializzare il "trascorso"Tempo, applicando il"setInterval ()"Metodo e incremento del tempo trascorso indicato in base all'intervallo impostato.
• Infine, dichiara una funzione chiamata "pauseInterval ()". Qui, applica il "ClearInterval ()"Metodo con la funzione"T"Come parametro su cui è impostato l'intervallo. Ciò comporterà la pausa permanentemente l'intervallo di set.

Produzione

Qui, il timer viene messo in pausa permanentemente.

Abbiamo compilato gli approcci per mettere in pausa un intervallo in JavaScript.

Conclusione

IL "valore booleanoApproccio ", il"jQueryApproccio "o il"ClearInterval ()"Il metodo può essere applicato per mettere in pausa un intervallo in JavaScript. Il primo approccio può essere applicato per assegnare un valore booleano corrispondente alla funzione accessibile per mettere in pausa e riprendere il timer set. L'approccio jQuery può essere utilizzato per accedere direttamente al pulsante, allegare un evento e assegnare un valore booleano con conseguente minore complessità del codice. Il metodo ClearInterval () può essere implementato per mettere in pausa l'intervallo impostato permanentemente. Questo tutorial ha spiegato gli approcci per mettere in pausa un intervallo in JavaScript.