Cancelando el Timeout y el Timeinterval

Clase 31 de 51 • Fundamentos de JavaScript 2017

Clase anteriorSiguiente clase

Julio J Yépez

student•

Me puse creativo y cree un pen con varios de los conocimientos del curso hasta ahora 😃 … incluido clearInterval()

Les comparto el link
https://codepen.io/jjyepez/pen/qVmxdw

¿Qué creen que se pueda mejorar en este código?

Mauricio Hernan Cabrera

student•

Te quedo muy bueno el proyecto!!

Miguel Angel Gatto

student•

Che, mucha gracias por compartir! Está buenísimo para ir viendo cosas más organizadas y ver un todas las caras de la moneda. GRACIAS!!

Jhonatan Steven Yepes

student•

Leonidas tiene una forma muy particular y efectiva de enseñar

Joaquin Araujo

student•

Es raro, pero no me funciona el código, ya que la se cancela el setTimeout, sin embargo logré solucionarlo con

.bind(null)

Tal como explicó Sacha en vídeos anteriores, mi código es este:

const sTimeout = document.getElementById('sTimeout')
const cancelTimeout = document.getElementById('cancelTimeout')

const timeOut = setTimeout(() => {
    sTimeout.textContent = 'Han pasado 3 segundos'
}, 3000)

cancelTimeout.addEventListener('click', () => {
    clearTimeout(timeOut).bind(null)
})

Joaquin Araujo

student•

Nota: Abrí una nueva consola de JavaScript, ejecuté el código sin el .bind(null) y funciono.

Daniel Diaz Orozco

student•

Que buen aporte, Muchas Gracias.

sara

student•

Yo quise hacer una cuenta regresiva sin botón. Quedo así: 😃

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Cuenta regresiva</title>
</head>
<body>

	<p id="timer">Acabamos en 10 segundos</p>

	<script type="text/javascript">

	const timer = document.getElementById('timer')
	let counter = 10

		const cuenta_regresiva = setInterval( () => {
			counter --
			if (counter == 0){
				clearInterval(cuenta_regresiva)
				timer.textContent = ("Finn!")
			}
			else if (counter == 1) {
				timer.textContent = (`Acabamos en ${counter} segundo`)
			} else{
				timer.textContent = (`Acabamos en ${counter} segundos`)
			}
		}
			,1000)

	</script>
</body>
</html>

Mauricio Hernan Cabrera

student•

Jugando un poco con la función, consegui hacer un cronometro/temporizador, visualmente me gusto mucho como quedo, aunque en codigo deja mucho que desear, proximamente lo estare reescribiendo para que quede mas entendible. Que opinan de la app?

https://hernancabrera.github.io/cronometro-temporizador/

Ricardo Celis

teacher•

se ve bien aunque pór alguna razón no me funcionaron los botones :thinkingFace:

Mauricio Hernan Cabrera

student•

tuve bastantes problemas para que funcionada la etiqueta audio en celus, de que dispositivo lo estabas ejecutando? y de que navegador?
El codigo de js, no lo transpile en babel ahora que me estoy acordando jajaaj

Ignacio Esteban Aredez Diaz

student•

Menos mal que no exploto la bomba XD

Fco Castro

student•

Esa línea de mi código me hizo perder más de 20 minutos porque la llamada al id del botón la hice SIN COMILLAS. Qué torpe.

Adelanteee!!!

const variableBoton = document.getElementById("bontonCancel")

Joaquin Araujo

student•

Hice uso de clearTimeout(timeInterval)```` para detener a mi funciónsetInterval(…)``` y funciono de igual forma…

Julio J Yépez

student•

Quizás te haya funcionado Joaquin pero al programar se debe tener en cuenta la semántica del código, la coherencia y las buenas prácticas.

Hay lenguajes muy permisivos como por ejemplo PHP en el que puedes comoter errores de forma, de semántica que no rompen la ejecución pero que propician el desorden, la mala programación y dificultan la mantenibilidad de los sistemas.

Así que, si el lenguaje te permite hacer cosas que van contra las buenas prácticas, pues bien; está en tí, no hacerlas, porque eres un programador profesional y de alto nivel … que tiene en cuenta estas cosas. 🤓🤘

Alfonso Jiménez Ruz

student•

Aquí os dejo mi granito de arena.
En este caso he creado tres botones: stop, go y reset para parar, comenzar/reanudar y reiniciar el contador respectivamente.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>setInterval</title>
</head>
<body>
    <h1 id="timer">Han pasado 0 segundos</h1>
    <button id="cancel-button">stop</button>
    <button id="continue-button">go</button>
    <button id="reset-button">reset</button>
    <script>
        let counter = 1;
        let timeInterval;

        const $cancelButton = document.getElementById('cancel-button');
        $cancelButton.addEventListener('click', () => {
            stop();
        })

        const $continueButton = document.getElementById('continue-button');
        $continueButton.addEventListener('click', () => {
            start();
        })

        const $resetButton = document.getElementById('reset-button');
        $resetButton.addEventListener('click', () => {
            counter = 1;
            stop();
            timer.textContent = 'Han pasado 0 segundos';
        })
    
        function stop() {
            clearInterval(timeInterval);
        }
        function start() {
            const timer = document.getElementById('timer');
            
            timeInterval = setInterval(() => {
                timer.textContent = counter==1 ? `Ha pasado ${counter++} segundo` : `Han pasado ${counter++} segundos`;
                console.log('ha pasado 1 segundo');
            }, 1000)
        }

    </script>
</body>
</html>```

Saludos.

Pablo Marino

student•

Me gusto utilizar TimeInterval en eun cronometro con botones.
HTML:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Cronometro</title>
     <!--Import Google Icon Font-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.min.css"  media="screen,projection"/>

      <!--Let browser know website is optimized for mobile-->
      <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  </head>
  <body>

      <div class="container">

      
    	<div class="row">

	      <div class="col s1 l3"></div>
	      <div class="col s3 l1"><h1 id="HORA">00:</h1></div>
	      <div class="col s3 l1"><h1 id="MINUTOS">00:</h1></div>
	      <div class="col s3 l1"><h1 id="SEGUNDOS">00</h1></div>
	  	   <div class="col s1 l3"></div>

    	</div>
    	<div class="row">
    		<div class="col s3"></div>
    		<div class="col s1"> <a class="btn-floating btn-large waves-effect waves-light red" id="pausar"><i class="material-icons">pause</i></a></div>
    		<div class="col s1"> <a class="btn-floating btn-large waves-effect waves-light grey" id="continuar"><i class="material-icons">refresh</i></a></div>
    		<div class="col s1"> <a class="btn-floating btn-large waves-effect waves-light red" id="inicializar"><i class="material-icons">play_arrow</i></a></div>

    	
    	</div>
      </div>






  <script type="text/javascript" src="js/reloj.js"></script>
  <script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
  <script type="text/javascript" src="js/materialize.min.js"></script>
  </body>
</html>

Javascript:

  let segundos = document.getElementById("SEGUNDOS")
      let minutos = document.getElementById("MINUTOS")
      let horas = document.getElementById("HORA")
      let timer_seg
      let calculoTimer


      const button_pausar = document.getElementById("pausar")
      const button_continuar = document.getElementById("continuar")
      const button_iniciar = document.getElementById("inicializar")

      let contadorSeg = 0
      let contadorMin = 0
      let contadorHora = 0
      let check = true
      let activar_continuar = false


      button_pausar.addEventListener('click', pausar_timer )
      button_continuar.addEventListener('click',continuar_timer)
      button_iniciar.addEventListener('click', reiniciar_timer )

        //let timer_seg = setInterval('timer_segundos()', 1000)

        function timer_segundos(){
          if (check==true){
            contadorSeg++
            if(contadorSeg <=59){
              if(contadorSeg<=9){
                segundos.textContent = `0${contadorSeg}`
              }else{
                segundos.textContent = contadorSeg
              }
            }else{
              segundos.textContent = `00`
              contadorSeg = 0
              timer_minutos()
              }
            }
          }

      function timer_minutos(){
        contadorMin++
        if(contadorMin <= 59){
          if(contadorMin <= 9){
            minutos.textContent = `0${contadorMin}:`
          }else{
            minutos.textContent = `${contadorMin}:`
          }
        }else{
          minutos.textContent = `00:`
          contadorMin = 0
          timer_horas()
        }
      }

      function timer_horas(){
        contadorHora++
        if(contadorHora <= 9){
          horas.textContent = `0${contadorHora}:`
        }else{
          horas.textContent = `${contadorHora}:`
        }
      }


        //------------------------------
       function pausar_timer(){

        clearInterval(timer_seg)
        check=false
        activar_continuar = true
        button_continuar.className='btn-floating btn-large waves-effect waves-light red'
        button_iniciar.firstChild.lastChild.nodeValue="play_arrow"
        guardar_tiempo()
      }

      function continuar_timer(){
        if(activar_continuar==true){

          check=true
          timer_seg = setInterval('timer_segundos()', 1000)
          activar_continuar = false
          button_continuar.className='btn-floating btn-large waves-effect waves-light grey'
        }


      }
      //-----------------------------------------------------

    function reiniciar_timer(){

        clearInterval(timer_seg)
        contadorSeg = 0
        contadorMin = 0
        contadorHora = 0

        segundos.textContent ='00'
        minutos.textContent ='00:'
        horas.textContent ='00:'
        check=true
        timer_seg = setInterval('timer_segundos()', 1000)
        activar_continuar = false
        button_continuar.className='btn-floating btn-large waves-effect waves-light grey'
        button_iniciar.firstChild.lastChild.nodeValue="replay"
    }

    function guardar_tiempo(){
      let hora_time = parseInt(horas.textContent)
      let minuto_time = parseInt(minutos.textContent)
      let segundo_time = parseInt(segundos.textContent)

      if(hora_time <=9){ hora_time="0"+ hora_time+":" }else{ hora_time=hora_time+":" }
      if(minuto_time <=9){minuto_time = "0"+minuto_time+":"}else{minuto_time=minuto_time+":"}
      if(segundo_time <=9){segundo_time = "0"+segundo_time+":"}else{segundo_time=segundo_time}

      calculoTimer =hora_time+minuto_time+segundo_time
      alert(calculoTimer)
    }

Armando Alamilla Cuellar

student•

Aquí un pequeños aporte.
Para realizar cuentas regresivas solo necesitas poner "–"
es decir:

let counter = 5; 
counter --;

esto va a ser: 5, 4, 3, 2, 1…

con esto y combinando Timeout y Timeinterval realice una especie de juego en el cual tienes que desactivar una bomba. Aquí el código:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>Bomba - Ejemplo de setTimeout y setInterval</title>
	</head>
	<body>
		<div>
			<h1 id="timer">Faltan 5 segundos para que explote la bomba</h1>
			<button id="cancel-button">Cancelar</button>
		</div>
		<script>
			const $timer = document.getElementById('timer');
			const $cancelButton = document.getElementById('cancel-button');
			
			let counter = 5;
			const interval = setInterval(() => {
				counter --;
				let mensaje = (counter === 1) ? `Falta ${counter} segundo para que explote la bomba` : `Faltan ${counter} segundos para que explote la bomba`;
				$timer.textContent = mensaje;
			}, 1000);

			const timeout = setTimeout(() => {
				alert('No cancelaste a tiempo');
				clearInterval(interval);
				$timer.textContent = 'La bomba ha explotado :(';
			}, 5000);

			$cancelButton.addEventListener('click', () => {
				clearTimeout(timeout);
				clearInterval(interval);
				$timer.textContent = 'La bomba se ha desactivado a tiempo :)';
			});

		</script>
	</body>
</html>

Kevin Antonio Nava Garcia

student•

Hice este codigo con el fin de que puedes para y reanudar el temporizador cuando quieras, tipo cancelar setTimeout a los 4 seg y con un boton reanudarlo y continua en 4; pero el codigo no esta elegante ; si alguien quiere optimizarlo aqui lo dejo:

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>setInterval</title> </head> <body> <h1 id=“timer”> Han pasado 0 segundos</h1> <button id=“cancel-button”>cancel</button> <button id=“follow-button”>Continue</button> <script > //setInterval(queVoyAhacer,cadaCuantoTiempo) const timer = document.getElementById(‘timer’) let counter=0; let bool=false const $cancelButton=document.getElementById(‘cancel-button’) const $followButton=document.getElementById(‘follow-button’) ``` //$cancelButton.addEventListener(queEvento,queHago) $cancelButton.addEventListener('click',()=>{ clearInterval(interval) //start(bool=true) }) $followButton.addEventListener('click',()=>{ //start(); $cancelButton.addEventListener('click',()=>{ clearInterval(interval) //start(bool=true) }) const interval=setInterval(()=>{ //Ttambine funciona para setTimeput counter++; if(counter<10){timer.textContent=`ha pasado ${counter} segundo`}else{ timer.textContent=`han pasado ${counter} segundos` } //alert(`han pasado ${counter} seg`) //console.log('ha pasado 1 seg') },1000) }) const interval=setInterval(()=>{ //Ttambine funciona para setTimeput counter++; if(counter<10){timer.textContent=`ha pasado ${counter} segundo`}else{ timer.textContent=`han pasado ${counter} segundos` } //alert(`han pasado ${counter} seg`) //console.log('ha pasado 1 seg') },1000) //interval() ``` </script> </body> </html>

Kevin Antonio Nava Garcia

student•

Os dejo mi codigo; con el puedes parar el time y reanudarlo donde lo dejaste(para comenzar el temporizador darle al button “continue”):

<!DOCTYPE html> <html lang=“en”> <head> <meta charset=“utf-8”> <title>setInterval</title> </head> <body> <h1 id=“timer”> Han pasado 0 segundos</h1> <button id=“cancel-button”>cancel</button> <button id=“follow-button”>Continue</button> <script > //setInterval(queVoyAhacer,cadaCuantoTiempo) const timer = document.getElementById(‘timer’) let counter=0; let bool=false const $cancelButton=document.getElementById(‘cancel-button’) const $followButton=document.getElementById(‘follow-button’) ``` //$cancelButton.addEventListener(queEvento,queHago) $followButton.addEventListener('click',()=>{ //start(); $cancelButton.addEventListener('click',()=>{ clearInterval(interval) //start(bool=true) }) const interval=setInterval(()=>{ //Ttambine funciona para setTimeput counter++; if(counter<10){timer.textContent=`ha pasado ${counter} segundo`}else{ timer.textContent=`han pasado ${counter} segundos` } //alert(`han pasado ${counter} seg`) //console.log('ha pasado 1 seg') },1000) //interval() }) ``` </script> </body> </html>

Maikol Vasquez

student•

<!DOCTYPE html>
<html>
  <head>
    <title>Contador</title>
  </head>
  <body>
    <p id = "label"></p>
    <script>
      const label = document.getElementById("label");
      let counter = 0;

      const _loop = () =>{
      const timer = setInterval(() =>{
        if (counter < 1){
          label.textContent = `ha pasado 1 segundo`;
        } else {
          label.textContent = `han pasado ${counter + 1} segundos`;
        }
        counter++;
        if (counter == 5){clearInterval(timer)
            counter = 0;
            _loop();
          }
      }, 1000);
    }
    _loop();
    </script>
  </body>
</html>

ccardenasg cardenas

student•

Hola Leonidas podrías dejar de leer lo que escribes mientras haces los ejercicios. No sé si soy el único pero me llega a estresar.
Gracias.
AC

Omar Eduardo Vásquez Chavarri

student•

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>SetInterVal</title>
	<link rel="stylesheet" href="">
</head>
<body>

	<h1 id='timer'>Han pasado 0 segundos</h1>
	<button id="cancel-button">Cancel</button>
	<script type="text/javascript">
		const timer = document.getElementById('timer');
		const $cancelButton = document.getElementById('cancel-button');
		let count=0;
		const interval = setInterval(()=>{
			count++;
			timer.textContent = `Han pasado ${count} segundos`;
		},1000);

		$cancelButton.addEventListener('click',()=>{
			clearInterval(interval);
		})

	</script>
</body>
</html>

Ivan Diaz

student•

Debió dar todo el curso Leonidas, esta mejorando mucho como maestro.

Eden Gomez Gress

student•

Buen dia companeros, este es mi codigo para este ejemplo pero no me funciona, alquien me podria explicar porque?.

Cuando abro la consola me muestra el siguiente mensaje:

Uncaught TypeError: Cannot read property ‘addEventListener’ of null
at setInterval.html:28

<!DOCTYPE html>
<html>
  <head>
    <metacharset="utf-8">
    <title>setInterval</title>
  </head>
  <body>
    <h1 id="timer">Ha pasado 0 segundos</h1>
    <button id='cancel-inteval'> Cancel </button>

    <script type="text/javascript">

      const timer = document.getElementById('timer');
      let counter = 0;
      const interval = setInterval( () => {
        counter++;
        //let mensaje = (counter === 1) ? `Ha pasado ${counter} segundo` : `Han pasado ${counter} segundos`;
          let message = counter;
          if (message === 1){
            timer.innerHTML = ` Ha pasado ${message} segundo`;
          } else {
            timer.innerHTML = ` Han pasado ${message} segundos`;
          }
        //timer.textContent = mensaje;
      }, 1000)

      const $cancel = document.getElementById('cancel-interval');
      $cancel.addEventListener('click' , () => {
        clearInterval(interval)
      })
    </script>
  </body>
</html>

Alexander Chinea

student•

Hola amigo, tienes que tener mas cuidando al momento de escribr los id, <button id=‘cancel-inteval’> el error esta en inteval sin la “r”

Eden Gomez Gress

student•

Que tonto no pude notar ese error, gracias companero por ayudarme

Farid Murzone

student•

Me gustó el ejemplo de la bomba jeje

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Explota la bomba</title>
</head>
<body>
	<h1 id="timer">La bomba explotará en 10 segundos</h1>
	<button id="cancel-button">Cancelar detonación</button>
	<script>
		const timer = document.getElementById('timer')
		let counter = 10
		const interval = setInterval(() => {
			counter--
		    if(counter === 0){
	        window.location.href = "https://www.youtube.com/watch?v=zhBxfNm3rJE"
		    }
			timer.textContent = `La bomba explotará en ${counter} segundos`
		}, 1000)

		const $cancelButton = document.getElementById('cancel-button')
		$cancelButton.addEventListener('click', () => {
			clearInterval(interval)
		})		
	</script>
</body>
</html>

Miguel Angel Espeso Alvarez

student•

Mi aporte al segundo reto de Leonidas, espero sirva.

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

</head>

<body>

    <h1 id="contador">Ha pasado 0 segundos</h1>
    <button id="cancel">cancel</button>
    <script>
        let count = 0
        let element = document.getElementById('contador')
        const paroContador = setInterval(() => {
            count++
            let name = count > 1 ? 'segundos' : 'segundo'
            element.textContent = `Hola, han pasado ${count} ${name}`
        }, 1000)

        const cancel = document.getElementById('cancel')
        cancel.addEventListener('click', ()=>{
            clearInterval(paroContador)
        })
        
    </script>
</body>

</html>

Cancelando el Timeout y el Timeinterval

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval

Qué son y cómo se implementan el callbacks en JavaScript

Eliminando el callback hell usando promesas en JavaScript

Estructuras de datos y funciones avanzadas

Funciones Recursivas

Memoizacion

Iteradores en JavaScript

Generadores en JavaScript

Estructuras de Datos Inmutables en JavaScript

Creando un paquete para NPM

Requisitos Técnicos

Creando nuestro paquete

Escribiendo el código de nuestro paquete

Testeando el paquete

Publicando el paquete en NPM

Juego de HTML

¿Qué vamos a construir?

Inicializando el juego

A una ronda le sigue otra ronda

Añadir una librería

Cierre del Curso

Desafíos

Crear un modulo para convertir medidas de peso

Crear un juego en HTML, tic tac toe

Crear un tutorial