El 14 de septiembre de 2017, publicamos una versión revisada de nuestra Política de privacidad. Tu uso continuado de video2brain.com significa que aceptas este documento revisado, por lo que te recomendamos que dediques unos minutos a leerlo y comprenderlo.

JavaScript esencial

Uso de temporizadores o timers

Prueba ahora LinkedIn Learning sin cargo y sin compromiso.

Prueba gratis Mostrar modalidades de suscripción
El uso de temporizadores o timers en un proyecto es algo común y que te ayuda a interactuar con el usuario en relación a ciertas cantidades de tiempo. Aprende cómo crear y trabajar con los temporizadores y así agregar otro nivel de interactividad con el usuario final.
04:41

Transcripción

Bajo ciertas circunstancias, el uso de temporizadores dentro de tu aplicación va a ser muy importante. Y esto ¿para qué nos va a servir? Para poder ejecutar determinadas acciones dependiendo de un cierto lapso de tiempo. Y para esto, nosotros tenemos dos tipos de temporizadores: uno llamado'setInterval'y el otro llamado'setTimeout'. El primer elemento que nosotros vamos a tener es'setInterval'. Con'setInterval', lo que nosotros estaremos trabajando es la ejecución infinita de un elemento cada determinado tiempo. Es decir, si yo establezco que sea cada tres segundos, entonces cada tres segundos va a suceder una acción hasta que yo lo detenga. Y, posteriormente, vamos a tener otro tipo de temporizador o "timer" y este va a ser el llamado'setTimeout'. Lo que va a hacer este tipo de temporizador o "timer" es que va a ejecutar una acción después del tiempo que tú le estés indicando y solamente lo va a repetir una sola vez. Veamos cómo se implementan. En este caso, nosotros tenemos una función llamada'setColor', esta función'setColor'está asociado al "body" del documento de nuestra página y lo que vamos a hacer es estar cambiando el color del fondo de pantalla. Si yo invoco mi función'setColor'directamente desde la consola, al invocarla, lo primero que hace es cambiarla a azul, porque nosotros aquí tenemos: si es igual a color azul, entonces pone verde; de lo contrario, pone color azul. Volvemos a invocar nuevamente'setColor' y cambia a verde, de nuevo azul, de nuevo verde. ¿Pero qué tal si podemos hacer esto de una manera más automatizada? Para esto vamos a utilizar nuestro temporizador y aquí vamos a utilizar primero'setInterval'. En este caso de'setInterval', recibe por dentro primero una función o la invocación de una función. Aquí adentro, nosotros tenemos una función anónima donde estamos invocando la función'setColor'. Aquí, nosotros vamos a cambiar cada dos segundos el color del fondo de nuestra página. Debes tener cuidado, porque esta cantidad que estamos escribiendo aquí está dada en milisegundos, entonces tú siempre debes escribirla en milisegundos, y no existe una posibilidad de ponerlo en segundos o ponerlo en horas de manera nativa, así que puedes hacer la conversión y trabajar con milisegundos. Vamos a actualizar rápidamente el navegador, esperamos dos segundos y vemos como cambia a un color azul y después cambia a un color verde; uno, dos, uno, dos. Aquí tú puedes ver que obviamente esto sigue y va a seguir cambiando y seguirá cambiando hasta que nosotros detengamos el temporizador, por eso mismo nosotros hicimos una asociación a una variable llamada'temporizador'. Esto lo vamos a meter directamente en una función llamada 'stop ChangeColor'. Para poder detener nuestro temporizador, vamos a utilizar un método llamado 'clearInterval' y le vamos a pasar de parámetro el temporizador. Vamos a actualizar nuestro navegador y vemos como comienza el temporizador a invocar a la función'setColor' y esto va a seguir infinito hasta que nosotros lo detengamos o se detenga, dependiendo de una acción en el sistema. Para esto, vamos a invocar la función llamada'stopChangeColor', que lo único que hace es limpiar el intervalo existente. Lo utilizamos y vemos como ahora se ha detenido y ya no se sigue ejecutando, así nosotros ya tenemos un control sobre este tipo de temporizadores. Y, de la misma manera, nosotros podemos trabajar pero utilizando'setTimeout'. Vamos a utilizarlo, voy a copiar un poco este mismo código y, en lugar de utilizar 'setInterval', voy a trabajar con'setTimeout'. Aquí vamos a darle tres segundos. Para esto voy a comentar primero el primer temporizador para que este no se active. Una vez que ya lo tengo comentado, voy a actualizar mi página web, esperamos los tres segundos que se están ejecutando y vemos como ha cambiado. Después de esto, ya no va a suceder ningún cambio, porque con'setTimeout'solamente expresamos que va a ocurrir una vez. Si quisiéramos que esto se ejecutara más veces o siempre se estuviera ejecutando, entonces necesitaremos trabajar con el método'setInterval'. De esta forma, has aprendido ya cómo puedes trabajar con temporizadores o "timers" dentro de JavaScript.

JavaScript esencial

Aprende y conoce JavaScript empezando por entender sus conceptos más básicos y esenciales, pero considerando en todo momento la nueva especificación del lenguaje ES6.

5:26 horas (90 Videos)
Actualmente no hay comentarios.
 
Software:
Fecha de publicación:12/09/2017

Este curso video2brain está disponible como descarga y para ser visualizado online. ¡Pero no hace falta que decidas entre las dos opciones! Al comprar el curso, disfrutarás de ambas posibilidades.

La descarga te permite ver las lecciones sin estar conectado/a a internet y supone una navegación fácil y ágil entre capítulo y capítulo. Si vas a trabajar en diferentes ordenadores o si no quieres descargarte el curso completo, entra en la web con tus datos de acceso y disfruta directamente de tus vídeos online. Te deseamos que disfrutes de este curso y te resulte de mucha utilidad.

Estamos a tu disposición si tienes cualquier tipo de duda o pregunta.