Comment faire une pause d'un intervalle en javascript?

Dans le processus de mise en œuvre de diverses fonctionnalités en même temps, il est nécessaire de désactiver une fonctionnalité particulière pendant un certain temps. Cela aide à observer le fonctionnement de chaque fonctionnalité. Parfois, il est nécessaire d'afficher une fonctionnalité spécifique pendant une période définie, puis de le désactiver. Dans de tels cas, la pause d'un intervalle en JavaScript est d'une grande aide pour faire face à de telles situations.

Comment faire une pause d'un intervalle en javascript?

Les approches suivantes peuvent être utilisées en combinaison avec le «setInterval ()”Méthode pour suspendre un intervalle en JavaScript:

• "Valeur booléenne" approche.
• Le "jquery" approche.
• "ClearInterval ()" méthode.

Approche 1: pause un intervalle en JavaScript en utilisant la méthode setInterval () avec une approche de valeur booléenne

Le "setInterval ()«La méthode appelle une fonction particulière à des intervalles spécifiés à plusieurs reprises. Cette approche peut être implémentée pour attribuer une valeur booléenne particulière à la fonction à accéder, ce qui entraînera une pause et la suppression de l'intervalle.

Syntaxe

setInterval (fonction, millisecondes)

Dans la syntaxe ci-dessus:

• "fonction»Fait référence à la fonction à exécuter et«millisecondes"Est l'intervalle de temps.

Exemple

Pour le démontrer, créez un document HTML et placez les lignes suivantes à l'intérieur:

= "tête"> secondes:



CV
Pause

Dans le code ci-dessus:

• Dans le «”Tag, incluez le«portée”Élément pour inclure les secondes à écouter.
• Après cela, créez deux boutons ayant l'attaché "sur clic»Redirection de l'événement vers deux fonctions distinctes.
• L'un des boutons créés entraînera une pause de l'intervalle et l'autre le reprendra.

Maintenant, dans la partie javascript du code:

varget = document.getElementById ("tête");
var paused = false;
var elapsedTime = 0;
var t = setInterval (function ()
si(!pause)
ElapsedTime ++;
obtenir.innerText = "Elapsed Seconds:" + ElapsedTime;

, 1000);
functionResumeInterval ()
pause = false;

functionPauseInterval ()
pause = true;

Dans l'extrait de code ci-dessus:

• Accéder au "portée"Élément par son spécifié"identifiant" en utilisant le "document.getElementByid ()" méthode.
• À l'étape suivante, attribuez une valeur booléenne "FAUX" au "interrompu»Variable. De même, initialisez la variable "temps écoulé" avec "0"Pour l'incrémenter.
• Maintenant, appliquez le «setInterval ()”Méthode à la fonction et incrément le temps écoulé initialisé sous la forme de secondes lorsque l'intervalle est défini sur (1000 millisecondes = 1 seconde)
• Dans l'étape suivante, déclarez une fonction nommée «RessumeInterval ()". Ici, attribuez la valeur booléenne comme «FAUX"À la variable précédemment assignée"interrompu". Cela entraînera la reprise de l'intervalle pause sur le bouton cliquer.
• De même, définissez une fonction nommée «pauseInterval ()”Qui fera en pause l'intervalle défini en attribuant la valeur booléenne également comme discuté.

Sortir

Dans la sortie ci-dessus, on peut observer que l'exigence souhaitée est satisfaite.

Approche 2: pause un intervalle en JavaScript en utilisant la méthode setInterval () avec l'approche jQuery

Cette approche peut être implémentée pour accéder directement au bouton, joindre un événement et attribuer une valeur booléenne.

Syntaxe

setInterval (fonction, millisecondes)

Dans la syntaxe ci-dessus:

• "fonction»Fait référence à la fonction à exécuter et«millisecondes"Est l'intervalle de temps.

Exemple

Le code-snippet suivant a démontré le concept:

= "tête"> secondes:



CV
Pause

Dans le code ci-dessus:

• Tout d'abord, incluez le «jquery" bibliothèque.
• Dans la prochaine étape, relancez l'approche discutée pour inclure le «portée"Élément afin de s'accumuler"secondes"Dans ce.
• Après cela, de la même manière, incluez deux boutons séparés pour une pause et une reprise de l'intervalle en pause.

Dans la partie jQuery, passez par les lignes suivantes du code:

var get = $ ('span');
var paused = false;
var elapsedTime = 0;
var t = fenêtre.setInterval (function ()
si(!pause)
ElapsedTime ++;
obtenir.Texte ("DECONDES ELAPSÉS:" + ElapsedTime);

, 1000);
$ ('.pause').on ('click', function ()
pause = true;
);
$ ('.jouer').on ('click', function ()
pause = false;
);

Dans le code ci-dessus, suivez les étapes indiquées:

• Répondez le "portée”Element en pointant le"éléments" nom.
• Dans le code supplémentaire, de même, allouer une valeur booléenne au «interrompu«Variable et initialisez le temps écoulé avec«0".
• Maintenant, relancez l'approche discutée pour appliquer le «setInterval ()«Méthode à la fonction et incrément de la même manière le temps écoulé sous la forme de secondes.
• Enfin, attachez le «Cliquez sur”Événement aux deux boutons accessibles et attribuez la valeur booléenne indiquée à chacun des boutons en utilisant la jQuery"sur()" méthode.

Sortir

Dans la sortie ci-dessus, il est évident que la minuterie est interrompue et a repris avec succès.

Approche 3: Pause un intervalle en javascrip

Le "ClearInterval ()»La méthode efface la minuterie de set dans la méthode setInterval (). Cette méthode peut être utilisée pour suspendre l'intervalle défini "en permanence".

Syntaxe

setInterval (fonction, millisecondes)

Dans la syntaxe ci-dessus:

• "fonction»Fait référence à la fonction à exécuter et«millisecondes"Est l'intervalle de temps défini.

ClearInterval (intervalle)

Dans la syntaxe ci-dessus:

• "intervalle»Fait référence à l'intervalle renvoyé de la méthode setInterval ()

Exemple

Passez par les lignes de code indiquées:

= "head" style = "font-weight: bold;"> secondes:



Pause

• Ici, répétez les étapes discutées dans les méthodes précédentes pour inclure le «portée" élément.
• Dans l'étape suivante, créez également un bouton avec un "sur clic”Événement invoquant la fonction PauseInterval ().

Effectuez les étapes indiquées dans la partie JavaScript du code:

varget = document.getElementById ("tête");
var elapsedTime = 0;
var t = setInterval (function ()
ElapsedTime ++;
obtenir.innerText = "Elapsed Seconds:" + ElapsedTime;
, 1000);
functionPauseInterval ()
ClearInterval (t);

• Dans la première étape, de même, accédez au «portée«Élément par son«identifiant" en utilisant le "document.getElementByid ()" méthode.
• Répétez les méthodes discutées pour initialiser le «écoulé«Temps, appliquant le«setInterval ()«Méthode, et incrément le temps écoulé indiqué selon l'intervalle.
• Enfin, déclarez une fonction nommée «pauseInterval ()". Ici, appliquez le «ClearInterval ()"Méthode ayant la fonction"t«Comme paramètre sur lequel l'intervalle est défini. Cela entraînera une pause en permanence de l'intervalle.

Sortir

Ici, la minuterie est interrompue en permanence.

Nous avons compilé les approches pour faire une pause d'un intervalle en javascript.

Conclusion

Le "valeur booléenne«Approche, le«jquery«Approche, ou le«ClearInterval ()«La méthode peut être appliquée pour suspendre un intervalle en javascript. La première approche peut être appliquée pour attribuer une valeur booléenne correspondante sur la fonction accessible pour faire une pause et reprendre la minuterie définie. L'approche jQuery peut être utilisée pour accéder directement au bouton, joindre un événement et attribuer une valeur booléenne, ce qui entraîne une complexité globale moins de code. La méthode ClearInterval () peut être mise en œuvre pour suspendre l'intervalle définitif en permanence. Ce tutoriel a expliqué les approches pour suspendre un intervalle en JavaScript.