Implementación de set interval en JavaScript

Clase 30 de 51 • Fundamentos de JavaScript 2017

Resumen

Con setInterval puedes ejecutar código cada cierto tiempo, un buen ejemplo de setInterval es el contador que aparece entre video y video que te dice: El siguiente video se reproducirá en 5 segundos… 4 segundos…

En JS tenemos el método setInterval que nos permite hacer esto.

El reto que te voy a dejar en ésta clase se llama pluralización, lo que debes hacer es que cuando haya pasado un segundo el mensaje diga HA PASADO UN SEGUNDO, pero cuando corresponda a mas de un segundo diga HAN PASADO x SEGUNDOS.
Deja en la sección de comentarios tu solución.

Juan Sifontez

student•

Esta es mi solución al reto:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>setInterval</title>
  </head>
  <body>
    <h1 id="timer">Ha pasado 0 segundos</h1>

    <script type="text/javascript">
      const timer = document.getElementById('timer')
      let counter = 0
      setInterval( () => {
        counter++
        let mensaje = (counter === 1) ? `Ha pasado ${counter} segundo` : `Han pasado ${counter} segundos`;
        timer.textContent = mensaje;
      }, 1000)
    </script>
  </body>
</html>

Juan Jose Vega

student•

Me podrias explicar estas dos líneas

let mensaje = (counter === 1) ? Ha pasado ${counter} segundo : Han pasado ${counter} segundos;

Mario Josue Grieco Villamizar

student•

es el operador ternario
es lo mismo que

let mensaje

if ( counter == 1 ) {
mensaje = Ha pasado ${counter} segundo
}
else {
mensaje = Han pasado ${counter} segundos
}

Javier Nava

student•

El mismo ejemplo sin if

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>setInterval</title>
	</head>
	<body>
		<h1 id="timer">ha Pasado 0 segundos</h1>
		<script>
			//setInterval(funcion , tiempo)
			let counter = 0

			const timer  = document.getElementById('timer')
			let n  = ''
			let s = ''
			let currentString = 0
				setInterval(() =>{
					counter++

					timer.textContent =`ha${n} Pasado ${counter} segundo${s}`
					 n = "n"
					 s = "s"
				}
				 , 1000)
		</script>

	</body>
</html>

Juan Ramón Rustarazo Garrido

student•

No se si es mejor o peor, pero se agradece ver una opción diferente, sin condiciones.

Javier Nava

student•

si tomas en cuenta evaluar la condicion por cada segundo si es importante!

Kevin Morales

student•

Solución, creo que ya varios lo hicieron así, con if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>setInterval</title>
</head>
<body>
    <h1 id="timer">Ha pasado 0 segundo</h1>
    <script>
        // setInterval(Qué voy a hacer?, cada cuanto tiempo debo hacerlo)

        const timer = document.getElementById('timer')
        let counter = 0;

        setInterval(() => {
            counter++;

            if (counter == 1) {
                timer.textContent = `Ha pasado ${counter} segundo`
            }

            else {
                timer.textContent = `Han pasado ${counter} segundos`;
            }

        }, 1000)
    </script>
</body>
</html>

Edgar Arce

company_admin•

Excelentes cursos.
Esta es mi solución al reto.

Kevin Daniel Guzmán Delgadillo

student•

Listo

let count   = 0
let element = document.getElementById('contador')
setInterval(() => {
    count ++
    let name = count > 1 ? 'segundos' : 'segundo'  
    element.textContent = `Hola la cuenta va en ${count} ${name}`
}, 1000)```

Omar Gaston

student•

Mi solución de este reto, de manera reducida:

<!DOCTYPE html>
<html>
<head>
	<title>SetInterval Test</title>
</head>
<body>
<h1 id="timer">Han pasado 0 segundos</h1>

<script type="text/javascript">
	const timer = document.getElementById('timer')
	let counter = 0
	let msj

	setInterval(() => {
		counter++
		timer.textContent = counter==1 ? `Ha pasado ${counter} segundo` : `Han pasado ${counter} segundos`

	}, 1000)

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

Saúl Morales

student•

Pueden usar clearInterval

const interval = setInterval(count, 1000)

let counter = 0;
function count(){
counter++;	
if(counter <= 10){
console.log(counter);
}else{
clearInterval(interval)
}
}

Ignacio Esteban Aredez Diaz

student•

Listo reto conseguido, gracias Leonidas

JESUS DARIO MARENCO PORTO

student•

Leonidas excelente ya me conecte nuevamente

Javier Pomachagua Pérez

student•

Mi solución al reto con el menor número de líneas posibles:

<h1 id="timer">Ha pasado 0 segundo</h1>
    <script>
        const timer = document.getElementById('timer');
        let contador = 0;
        setInterval(() => {
            timer.textContent = `Ha pasado ${contador} segundo${contador > 0 ? 's' : ''}`;
            contador++;
        }, 1000);    
    </script>
</h1>

Wilson Montenegro

student•

Esta es mi solución.

Francisco Escobar

student•

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Contador</title>
  </head>
  <body>

    <h1 id="tiempo">En Marcha...</h1>
    <script type="text/javascript">
    contador= 0;
    palabra = "segundo"
    const texto = document.getElementById('tiempo')
    setInterval(()=>{
    texto.textContent = `Ya pasaron ${contador} ${palabra}`
    contador++;
    if (contador > 1) {
      palabra = "segundos"
    }
  },1000)


    </script>

  </body>
</html>```

Sergio Zapata Donado

student•

Pego acá mi solución que incluye la manera de detener el setInterval. Espero les sirva!

<!DOCTYPE html> <html> <head> <meta charset=“utf-8”> <title>Implementación de set timeout en JavaScript</title> </head> <body> <h1 id = ‘h1’>Han pasado 0 segundos</h1> <h2 id = ‘h2’></h2> <script type=“text/JavaScript”> const timer1 = document.getElementById(‘h1’); const timer2 = document.getElementById(‘h2’); contador = 0; //Asignamos setInterval a una variable para darle manejo mas adelante let tiempo = (setInterval(() => { contador++ //Validamos la posicion del contador para excribir el singular if (contador == 1) { timer1.textContent = `Ha pasado 1 segundo` }else { //si no es 1 entonces continua el conteo timer1.textContent = `Han pasado ${contador} segundos` } //validamos que la posiscion del contador hasta donde queremos detener if (contador == 5){ //Pasamos a clearInterval la variable que tiene asignado setInterval // y asi detenemos el conteo clearInterval(tiempo); //Pasamos a H2 un texto o podemos pasar al siguiente video 😃 timer2.textContent = `Fin del conteo` } }, 1000)) </script> </body> </html>

Juan Sáez García

student•

Una opción sería esta, pero siento que se puede hacer de una mejor manera, sin tener que preguntar cada segundo. si alguien saber mejorar la respuesta díganlo

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>setInterval</title>
</head>
<body>
  <h1 id="timer">Han pasado 0 segundos</h1>

  <script>
    const timer = document.getElementById('timer');
    let counter = 0;

    const interval = setInterval(() => {
      counter++;
      if(counter == 1){
        timer.textContent = `ha pasado ${counter} segundo`;
      }else{
        timer.textContent = `han pasado ${counter} segundos`;
      }
    }, 1000)


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

Jose Manuel Montaño Saenz

student•

Me podrían decir que comando utiliza leonidas para crear rápidamente la platilla de HTML, el solo pone “Html:5”.

<!DOCTYPE html>
<html>
<head>
	<title>SetInterval</title>
</head>
<body>
	<h1 id = "timer"> Han pasado 0 segundos </h1>
	<script type="text/javascript">
		const timer = document.getElementById("timer");
		let counter = 0;
		const interval = setInterval(() =>{
			counter++;
			let mensaje = (counter === 1) ? `Han pasado ${counter} segundo` : `Han pasado ${counter} segundos`
			timer.textContent = mensaje; 
		}, 1000)
	</script>
</body>
</html>

Diego Forero

Team Platzi•

El usa un plugin llamado emmet que hace eso por ti.

Aquí puedes ver las descargas para diferentes editores

Jose Manuel Montaño Saenz

student•

Gracias, acabe de agregarlo a sublime

Jorge Alberto Bustamante Arellano

student•

Alguien tiene idea de cuál es la diferencia entre utilizar la propiedad “textContent” o la propiedad “innerHTML”?

Diego Forero

Team Platzi•

innetHTML => se usa principalmente cuando tienes que pasar contenido con estructura html en su interior.

textContent => se usa para pasar contenido son estructura html y es mucho más rápido que innerHTML

Andrés Madrigal

student•

Pregunta:
Se puede pasar con un parámetro o valor del setInterval()?
Ejemplo: usando return (?)

Diego Forero

Team Platzi•

No entiendo tu pregunta, puedes aclararla por favor.

Andrés Madrigal

student•

Ya lo respondieron mas adelante jaja

Enrique Espina

student•

Solución al reto
Gracias a @Jsifontez 😄
Utilizando el operador ternario.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>SetIntervalReto</title>
</head>
<body>
    <h1 id="timer">0 seconds has passed</h1>
    <script>
        const timer = document.getElementById('timer')
        let counter = 0
        setInterval(() => {
            counter++
            let message = (counter === 1) ? `${counter} second has passed` : `${counter} seconds has passed`;
            timer.textContent = message;
        }, 1000)
    </script>
</body>
</html>

Jorge Sanabria Martín

student•

Ahí va

var counter = 0; 
setInterval(() => {
let texto = counter == 1 ? `Ha pasado ${counter} segundo` : `Han pasado ${counter} segundos`; 
counter++;
console.log(texto);
}, 1000);

Carlos Francisco Betancourt Requena

student•

<!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>
    <script>
        // setInterval(¿Qué voy hacer?, ¿Cada cuánto tiempo debo hacerlo?);
        const timer = document.getElementById('timer');
        let count = 0;
        setInterval(() => {
            count++;
            if(count == 1) {
                timer.textContent = `Ha pasado ${count} segundo.`;
            } else {
                timer.textContent = `Han pasado ${count} segundos.`;
            }
        }, 1000);
    </script>
</body>
</html>

Implementación de set interval en JavaScript

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