JavaScript se utiliza como lenguaje de programación del lado del cliente y como lenguaje de programación del lado del servidor. Esoproporciona una gran cantidad de métodos para realizar varias funciones con facilidad. Esto es lo que hizo es uno de los lenguajes de programación más populares y también se está utilizando ampliamente en varios tipos de desarrollo de productos.SetInterval en JavaScript es parte de Timing Events en JavaScript y lo aprenderemos en la siguiente secuencia:
que es pojo en primavera
Eventos de tiempo
JavaScript también permite la ejecución de funciones así como los métodos con respecto al tiempo y no al tiempo de ejecución del programa. Esto permite la ejecución de las funciones en el tiempo especificado independientemente del tiempo de ejecución del programa.
Los dos métodos clave para usar los eventos de tiempo en JavaScript son:
setTimeout (función, milisegundo)
Esta función ejecuta la función dentro de la cual se pasa como parámetro solo una vez después del tiempo especificado en milisegundos.
setInterval (función, milisegundo)
Esta función ejecuta la función desde el tiempo de ejecución y después de cada intervalo de tiempo alcanzado. Repite la ejecución de la función en cada intervalo de tiempo.
Ahora sigamos adelante y veamos cómo funciona SetInterval en JavaScript.
SetInterval en JavaScript
El primer parámetro de esta función es la función a ejecutar y el segundo parámetro indica el intervalo de tiempo entre cada ejecución.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Aquí, document.getElementById obtiene el elemento de que tiene la identificación como 'demo' y la función d.toLocaleTimeString () dan la hora actual del sistema.
Por lo tanto, esto se repite cada 1000 milisegundos, lo que equivale a 1 segundo. Por lo tanto, la función se ejecuta repetidamente cada 1 segundo y, por lo tanto, el tiempo se actualiza cada segundo.
Entonces, ¿cómo detenemos esta ejecución? ¡Vamos a averiguar!
¿Cómo detener la ejecución?
Podemos detener la ejecución de la función setInterval () con la ayuda de otra función llamada clearInterval ().clearInterval () usa la variable devuelta por la función setInterval ().
Por ejemplo:
myVar = setInterval (función, milisegundos) clearInterval (myVar)
A continuación se muestra un ejemplo que utiliza tanto setInterval () como clearInterval (). Esto inicia un reloj y proporciona un botón para detener el tiempo.
A continuación se muestra un reloj.
Para el tiempo
Haga clic en el botón de arriba para detener el tiempo.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Salida:
Algunos ejemplos más con setInterval () y clearInterval ().
Crear una barra de progreso dinámica
#myProgress {ancho: 100% alto: 30 px posición: color de fondo relativo: #ddd} #myBar {color de fondo: # 4CAF50 ancho: 10 px alto: 30 px posición: absoluto}
Haz clic en mí función move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {ancho ++ elem.style.width = ancho + '%'}}}Salida:
La salida inicial
Salida después de hacer clic en el botón que dice 'Haga clic en mí'.
Alternar entre dos fondos
Dejar de alternar var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'rosa': 'amarillo'} función stopColor () {clearInterval (myVar)}Salida:
El color se alternaría entre el amarillo y el rosa. La salida anterior es antes de hacer clic en el botón y la siguiente es después de hacer clic en el botón.
Con esto, llegamos al final de nuestro artículo SetInterval en JavaScript. Espero que haya entendido cómo funciona el método SetInterval.
Revisar la por Edureka. La capacitación para la certificación de desarrollo web lo ayudará a aprender cómo crear sitios web impresionantes utilizando HTML5, CSS3, Twitter Bootstrap 3, jQuery y las API de Google, e implementarlo en Amazon Simple Storage Service (S3).
Tienes una pregunta para nosotros? Por favor, menciónelo en la sección de comentarios de este blog y nos comunicaremos con usted.