Cómo pausar un intervalo en JavaScript?

En el proceso de implementación de diversas funcionalidades al mismo tiempo, es necesario deshabilitar una funcionalidad particular durante algún tiempo. Esto ayuda a observar el funcionamiento de cada funcionalidad. A veces, existe el requisito de mostrar una funcionalidad específica durante un tiempo definido y luego deshabilitarla. En tales casos, la pausa de un intervalo en JavaScript es de gran ayuda para hacer frente a tales situaciones.

Cómo pausar un intervalo en JavaScript?

Los siguientes enfoques se pueden utilizar en combinación con el "setInterval ()Método para pausar un intervalo en JavaScript:

• "Valor booleano" acercarse.
• El "jQuery" acercarse.
• "ClearInterval ()" método.

Enfoque 1: Pausa un intervalo en JavaScript utilizando el método SetInterval () con el enfoque de valor booleano

El "setInterval ()El método "llama a una función particular a intervalos especificados repetidamente. Este enfoque se puede implementar para asignar un valor booleano particular a la función a acceder que dará como resultado una pausa y eliminación del intervalo establecido.

Sintaxis

setInterval (función, milisegundos)

En la sintaxis anterior:

• "función"Se refiere a la función para ejecutar y"milisegundos"Es el intervalo de tiempo.

Ejemplo

Para demostrar esto, cree un documento HTML y coloque las siguientes líneas dentro de él:

= "Cabeza"> segundos:



Reanudar
Pausa

En el código anterior:

• Dentro de ""Etiqueta incluye el"durar"Elemento para incluir los segundos que se transformarán.
• Después de eso, cree dos botones con el adjunto "al hacer clic"Redirección de eventos a dos funciones separadas.
• Uno de los botones creados dará como resultado detener el intervalo y el otro lo reanudará.

Ahora, en la parte de JavaScript del código:

varget = documento.getElementById ("Cabeza");
var pause = false;
var elpsapsedtime = 0;
var t = setInterval (function ()
si(!Paused)
Elapsedtime ++;
conseguir.inntext = "Seconds elapsed:" + elpsedtime;

, 1000);
functionResumeInterval ()
pausado = falso;

functionPauseInterval ()
pausado = verdadero;

En el fragmento de código anterior:

• Acceder al "durar"Elemento por su especificado"identificación" utilizando el "documento.getElementById ()" método.
• En el siguiente paso, asigne un valor booleano "FALSO" hacia "detenido" variable. Del mismo modo, inicialice la variable "tiempo transcurrido" con "0"Para incrementarlo.
• Ahora, aplique el "setInterval ()Método de la función e incremento El tiempo transcurrido inicializado en forma de segundos, ya que el intervalo se establece en (1000 milisegundos = 1 segundo)
• En el siguiente paso, declare una función llamada "reanuda Interval ()". Aquí, asigne el valor booleano como "FALSO"A la variable asignada previamente"detenido". Esto dará como resultado reanudar el intervalo pausado en el clic del botón.
• Del mismo modo, defina una función llamada "PauseInterval ()"Lo que detendrá el intervalo establecido asignando el valor booleano de la misma manera como se discutió.

Producción

En la salida anterior, se puede observar que se cumple el requisito deseado.

Enfoque 2: Pausa un intervalo en JavaScript utilizando el método SetInterval () con el enfoque jQuery

Este enfoque se puede implementar para acceder al botón directamente, adjuntar un evento y asignar un valor booleano.

Sintaxis

setInterval (función, milisegundos)

En la sintaxis anterior:

• "función"Se refiere a la función para ejecutar y"milisegundos"Es el intervalo de tiempo.

Ejemplo

El siguiente código-snippet demostró el concepto:

= "Cabeza"> segundos:



Reanudar
Pausa

En el código anterior:

• En primer lugar, incluya el "jQuery" biblioteca.
• En el siguiente paso, revive el enfoque discutido para incluir el "durar"Elemento para acumular"segundos" en eso.
• Después de eso, de manera similar, incluya dos botones separados para hacer una pausa y reanudar el intervalo de pausa.

En la parte jQuery, revise las siguientes líneas del código:

var get = $ ('span');
var pause = false;
var elpsapsedtime = 0;
var t = ventana.setInterval (function ()
si(!Paused)
Elapsedtime ++;
conseguir.texto ("segundos transcurridos:" + elpsedtime);

, 1000);
ps.pausa').en ('hacer clic', function ()
pausado = verdadero;
);
ps.jugar').en ('hacer clic', function ()
pausado = falso;
);

En el código anterior, siga los pasos establecidos:

• Buscar el "durar"Elemento señalando el"elementos" nombre.
• En el código adicional, de manera similar, asigna un valor booleano al "detenido"Variable e inicializa el tiempo transcurrido con"0".
• Ahora, revive el enfoque discutido para aplicar el "setInterval ()Método de la función e incrementa de manera similar el tiempo transcurrido en forma de segundos.
• Por último, adjunte el "hacer clic"Evento tanto para los botones accedidos como para asignar el valor booleano establecido a cada uno de los botones utilizando el jQuery"en()" método.

Producción

En la salida anterior, es evidente que el temporizador se detiene y se reanuda con éxito.

Enfoque 3: Pausa un intervalo en JavaScript usando el método SetInterval () con el método ClearInterval ()

El "ClearInterval ()El método "borra el temporizador SET en el método setInterval (). Este método se puede utilizar para pausar el intervalo establecido "permanentemente".

Sintaxis

setInterval (función, milisegundos)

En la sintaxis anterior:

• "función"Se refiere a la función para ejecutar y"milisegundos"¿Es el intervalo de tiempo establecido.

ClearInterval (intervalo)

En la sintaxis anterior:

• "intervalo"Se refiere al intervalo devuelto del método setInterval ()

Ejemplo

Revise las líneas de código establecidas:

= "cabeza" style = "font-weight: bold;"> segundos:



Pausa

• Aquí, repita los pasos discutidos en los métodos anteriores para incluir el "durar" elemento.
• En el siguiente paso, del mismo modo, cree un botón con un "al hacer clic"Evento invocar la función pauseInterval ().

Realice los pasos establecidos en la parte JavaScript del código:

varget = documento.getElementById ("Cabeza");
var elpsapsedtime = 0;
var t = setInterval (function ()
Elapsedtime ++;
conseguir.inntext = "Seconds elapsed:" + elpsedtime;
, 1000);
functionPauseInterval ()
ClearInterval (t);

• En el primer paso, de manera similar, acceda al "durar"Elemento por su"identificación" utilizando el "documento.getElementById ()" método.
• Repita los métodos discutidos para inicializar el "transcurrido"Tiempo, aplicando el"setInterval ()"Método, e incrementando el tiempo transcurrido establecido de acuerdo con el intervalo establecido.
• Finalmente, declare una función llamada "PauseInterval ()". Aquí, aplique el "ClearInterval ()"Método que tiene la función"T"Como su parámetro sobre el cual se establece el intervalo. Esto dará como resultado detener el intervalo establecido de forma permanente.

Producción

Aquí, el temporizador se detiene permanentemente.

Hemos compilado los enfoques para detener un intervalo en JavaScript.

Conclusión

El "valor booleano"Enfoque, el"jQueryEnfoque "o el"ClearInterval ()El método se puede aplicar para detener un intervalo en JavaScript. El primer enfoque se puede aplicar para asignar un valor booleano correspondiente sobre la función de acceso para hacer una pausa y reanudar el temporizador de configuración. El enfoque jQuery se puede utilizar para acceder al botón directamente, adjuntar un evento y asignar un valor booleano, lo que resulta en una menor complejidad de código general en general. El método ClearInterval () se puede implementar para detener el intervalo establecido de forma permanente. Este tutorial explicó los enfoques para detener un intervalo en JavaScript.