JavaScript SetInterval y SetTimeOut Métodos explicados

JavaScript es un lenguaje de programación web de alto nivel en el que cada declaración de código se ejecuta en línea por línea. Sin embargo, suponga que desea ejecutar algún código o función en una etapa posterior (en el futuro) y no inmediatamente. Esto se llama programar una llamada en JavaScript y se puede lograr con los dos métodos incorporados; setTimeout () y setInterval ().

Esta publicación discute que setInterval () y setTimeout () Los métodos incorporados están en JavaScript. Sin embargo, antes de continuar, debe tenerse en cuenta que estos dos métodos no son parte de la especificación de JavaScript y son parte de la especificación estándar HTML, pero son compatibles con todos los principales navegadores.

¿Cuál es el método setTimeout ()??

El setTimeout () El método se utiliza para ejecutar un código específico en el futuro y no inmediatamente llamando a una función de devolución de llamada después de un intervalo de tiempo específico. La función de devolución de llamada se define como la función proporcionada a otra función como un argumento y se ejecuta en la función externa más tarde.

Sintaxis del método setTimeOut ()

El sintaxis de setTimeout () se da a continuación:

setTimeout (callbackfunc, milisegundos);

El primer argumento que damos al setTimeout () El método es la función de devolución de llamada que se ejecuta después de los milisegundos proporcionados.

Ejemplo
Pasamos por un ejemplo en el que establezcamos el setTimeout () Método en un botón y cuando el usuario haga clic en ese botón, las funciones de devolución de llamada se ejecutarán después de 2 segundos:

Intentalo

En la función de devolución de llamada, inicializamos una alerta que se mostrará después de dos segundos con el mensaje Hola.

¿Cuál es el método setInterval ()??

El setInterval () el método es el mismo que setTimeout () ya que también ejecuta una función de devolución de llamada después de un tiempo específico, pero con la excepción de que ejecuta la función de devolución de llamada continuamente después de ese intervalo de tiempo específico.

Sintaxis del método setInterval ()

El sintaxis del setInterval () El método es el siguiente:

setInterval (myFunc, milisegundos);

Como setTimeout () El primer argumento es la función de devolución de llamada que se ejecutará después del número especificado de milisegundos y la ejecución se repetirá continuamente después de este tiempo específico.

Ejemplo
Pasemos por un ejemplo en el que mostraremos el tiempo actual del sistema cada 1 segundo.

const myFunc = () =>
const d = nueva fecha ();
consola.Log (D.tolocaletiMestring ());

setInterval (myFunc, 1000);

En el código anterior, primero creamos una función en la que creamos una nueva fecha utilizando el Fecha objeto y consola registraron el tiempo del sistema.

Después de definir la función, utilizamos el setInterval () método, aprobado el nombre de la función y 1000 milisegundos, que es 1 segundo. Ahora la función se ejecutará cada 1 segundo y veremos el tiempo de nuestro sistema en el registro de la consola después de cada segundo:

Teteo de ejecución de setTimeOut () y setInterval ()

Si no desea la función de devolución de llamada de setInterval () o setTimeout () Para ejecutar más, podemos usar los métodos de detención disponibles en JavaScript para ambos.

Método ClearTimeOut ()
Para detener la ejecución del setTimeout () función podemos usar el ClearTimeOut () método que tomará una variable/ID que se devuelve desde el setTimeout () Método como argumento.

Ejemplo
En este ejemplo, detendremos la ejecución de la función de devolución de llamada definida con el método setTimeOut ():

Intentalo
Detener

El código anterior que se muestra es una forma extendida del ejemplo de setTimeOut () que se muestra anteriormente. En este código, agregamos otro botón con el nombre de Detener e invocé la función stop () cada vez que un usuario hace clic en el botón Stop. La función stop () tiene cleartimeout () que tiene una variable t como argumento. La variable t es simplemente una identificación devuelta desde la función setTimeOut ().

Cuando un usuario hace clic en el Intentar Botón entonces después de tres segundos vemos Hola en la alerta como se ve anteriormente. Sin embargo, si el usuario ahora hace clic en el botón Detener antes de 3 segundos, la función de retroceso de la llamada no se invocará y, por lo tanto, no veremos una alerta. Este fenómeno se muestra a continuación:

método ClearInterval ()
Del mismo modo, para detener la ejecución del setInterval () función, podemos usar el ClearInterval () método que también tomará la variable devuelta desde el setInterval () como argumento.

Ejemplo

Pasemos por un ejemplo en el que detendremos la ejecución de la función de devolución de llamada de la setInterval () método.

Para el tiempo

En el código anterior, definimos un botón en el HTML e inicializamos el evento OnClick en este botón. Cuando el usuario hace clic en el botón definido, el setInterval () El método dejará de ejecutar.

Cuando hicimos clic en el botón "Tiempo de detención", el tiempo del sistema dejó de mostrar en nuestro registro de consola:

Conclusión

El setTimeout () y setInterval () Los métodos programan una llamada que es ejecutar una función más tarde después de un número específico de milisegundos con la excepción de que setInterval () ejecuta una función continuamente después de ese tiempo específico, a diferencia de setTimeout () método que ejecuta una función solo una vez después del tiempo especificado.

En esta publicación, discutimos lo que el setTimeout () y setInterval () El método es y vimos sus ejemplos junto con capturas de pantalla de la salida. Al final, también vimos cómo detener la ejecución de las funciones de devolución de llamada asociadas con setTimeout () y setInterval () métodos.