Implementación de set timeout en JavaScript

Clase 29 de 51 • Fundamentos de JavaScript 2017

Resumen

En ésta clase aprenderemos qué es y como se implementa un setTimeout en JavaScript.

El RETO de esta clase es: Crea una ventana modal con HTML y usando setTimeout lo desaparezcas automáticamente luego de 5 segundos.
Por favor deja en la sección de comentarios tu solución y no olvides dejar tu feedback en las soluciones de tus compañeros.

Sergio Zapata Donado

student•

Una explicacion sencilla para descansar un poco del push de información de Sacha (ademas de un comercial para el curso de animaciones para la web jaja). Ánimos colegas a aprender mucho!

Melina Jacqueline onoriaga

student•

jajaja tal cual

Joaquin Araujo

student•

Que buena clase, es un complemento de lo que explica Sacha

Julio J Yépez

student•

Mi solución

const mostrarModal = ( t ) => {
  let boton = document.getElementById('boton')
  let modal = document.getElementById('modal')
  let msj = `Este modal se cerrará en ${t} ms`
  
  modal.innerHTML = msj
  modal.classList.add('mostrar')
  boton.classList.add('deshabilitado')

  setTimeout( () => {
    modal.classList.remove('mostrar')
    boton.classList.remove('deshabilitado')
  }, t)
}

Aquí el código completo, con el JS, HTML y el CSS

Jesús Enrique Rojas

student•

Hola, aqui esta mi practica del modal lo hice con un setInterval pero tambien agregue el setTimeout:

Si quieren ver el repo les dejo aqui el enlace

Ricardo Celis

teacher•

Excelente Jesus Enrique!

Jesús Enrique Rojas

student•

Muchas gracias @ricardocelis 😃

Lucas Zanek

student•

Creo que deberiamos pedir entre todos que los ultimos tres videos vuelvan a ser grabados, o tomar una estrategia distinta… evidentemente no fui el unico que se frustro al extremo con los ultimos 3 videos

Usuario anónimo

user•

apoyo la moción de la regrabación, o en su defecto que también otros instructores de frontend den sus aportes en vídeo sobre estos temas, porque tambéin me costó demasiado entenderlos…

Lucas Zanek

student•

Si leonidas promesas en tu video logre entenderlas perfectamente!! si podrias hacer el de async y await nos vendria de maravilla!!!, muchisimas gracias por tu tiempo

David Hernandez Hernandez

student•

Hoy es 5 de abril del 2018 y ejecuté el código con async y await directo en mi navegador(sin usar Babel) y corre perfectamente, por lo que lo más probable es que ya sea soportado Emacscript6 en los navegadores, o al menos en la versión más reciente de Chrome.

Diego Forero

Team Platzi•

Efectivamente ya chrome los soporta, puedes siempre verificar el soporte de los navegadores a alguna propiedad de js o css aquí

Leonardo

student•

Las últimas tres clases fueron muy difíciles y explicadas así nomás, y ahora ponen estas clases super, super básicas… es como raro, no?

Diego Forero

Team Platzi•

Hay temas que por su complejidad son más difíciles de entender que otros, solo es repasarlos con calma, practicar y los vas a entender, cuando ya los asimilas vas a pensar esto no es realmente tan complicado.

Ignacio Esteban Aredez Diaz

student•

Gollum por todos las la gente se queja de los últimos 3 vídeos y no paro de leer por tu “parte calma es muy fácil”," luego veraz lo sencillo que era" porque es vez de decir lo fácil que es no trabajan en el problema, estoy muy contento con la escuela pero la actitud que toman con los últimos tres vídeos, no me parece que sea la forma de actuar de la escuela, si Freddy es capaz de explicar temas mas complejos que los citados de forma amena y sencilla, como que con estos 3 vídeos no es posible , en vez de esconder la cabeza y decir calma, porque no un " ok ya que tanto usuarios se quejan o tiene problemas lo paso al equipo y lo comentamos para ver como podemos mejorarlo " no se tiene que ser muy observador para darse cuenta que en esos 3 vídeos el estilo de los comentarios de los usuarios cambia drásticamente y no precisamente para ser mas positivos.

Un saludo y espero que mejoren el contenido de esos 3 últimos vídeos

Francisco Jose

student•

Considero que esta clase debería de haberse dado mucho antes, porque vamos llevamos usando setTimeout bastante tiempo.

David Camacho

student•

Nunca me había alegrado tanto por ver a Leonidas… Jajajaja, estaba más perdido que Adán el día de las madres!

Darwin Rodríguez

student•

Es fácil criticar, es cierto no se empezó de la mejor manera primero se debió iniciar con qué es ECMAScript y todo eso pero Sasha explica muy bien, con esto no quiere decir que Leonidas lo hace mal, al contrario culminé el curso de Git y GitHub que el dicta. Seamos profesionales pero primero seamos persona y demos consejos en lugar de críticas bastante duras

Santiago Gómez

student•

Les comparto mi solución

<html lang="en">
<head>
  <meta charset="UTF-8">
  <style>
    body {
      margin: 0 auto;
      width: 100%;
      font-family: Arial;
      font-size: 10px;
    }
    .overlay{
        position: fixed;
        background: rgba(0,0,0,.5);
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        align-items: center;
        justify-content: center;
        transition: .8s ease-in;
        visibility: hidden;
        opacity: 0;
    }
    .modal{
      margin: 0 auto;
      background-color: white;
      width: 20%;
      height: auto;
      background: white;
      padding: 1.5em;
      border-radius: .5em;
    /*   modalOut .8s forwards */
    }
    .visible-on{
          visibility: visible;
          opacity: 1;
    }
    .modalBtn{
      background: #ff463b;
      border: 0;
      padding: .6em;
      font-style: bold;
      color: white;  
    }
        /*@keyframes animationIn {*/
    @keyframes modalIn {
      0% {
        transform: translateY(-3000px);
      }
      60% {
        transform: translateY(25px);
      }
      75% {
        transform: translateY(-10px);
      }
      90% {
        transform: translateY(5px);
      }
    }

    /*@keyframes animationOut {*/
    @keyframes modalOut {
      0% {
        transform: translateY(5px);
      }
      60% {
        transform: translateY(-10px);
      }
      75% {
        transform: translateY(25px);
      }
      100% {
        transform: translateY(-3000px);
      }
    }
  </style>  
</head>
<body>
  <img src="https://www.staffdigital.pe/blog/wp-content/uploads/2014/09/pagina-bbva.png" alt="">
  <div class="overlay" id='overlay'>
    <div class='modal' id='modal'>
      <h1>Atención!!</h1> 
      <h3>Su sesión cerrara por inactividad</h3>
      <button class='modalBtn' id='modalBtn'>Cerrar</button>
    </div>
  </div>  
</body>
  <script>
      const overlay =     document.getElementById('overlay');
  const modal = document.getElementById('modal');
  const btnClose = document.getElementById('modalBtn');

  let timeOut = setTimeout(setModal , 2000);

  btnClose.addEventListener('click', removeModal);

  function setModal() { 
    overlay.classList.add('visible-on');
    modal.style.animation = 'modalIn 1.6s forwards'};

  function removeModal() { 
    modal.style.animation = 'modalOut .5s forwards';
    overlay.classList.remove('visible-on');
    timeOut = setTimeout(setModal , 5000)
  }
  </script>
</html>

Jessica Tatiana Camacho

student•

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>timeout</title>
</head>
<body>
    <script>
        setTimeout(()=>{
            document.write("han pasado 5 segs")
        },5000)

        setTimeout(()=>{
            document.documentElement.innerHTML = '';
        },10000)
        
    </script>
</body>
</html>```

Andres Barbosa

student•

Utilice esta pagina para hacer la ventana modal y quedo de la siguiente manera

<!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>Timeout</title>
</head>

<body>
    <button id="myBtn">Open Modal</button>
    <!-- The Modal -->
    <div id="myModal" class="modal">

        <!-- Modal content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>Some text in the Modal..</p>
        </div>
    </div>
    <style>
        .modal {
            display: none;
            /* Hidden by default */
            position: fixed;
            /* Stay in place */
            z-index: 1;
            /* Sit on top */
            left: 0;
            top: 0;
            width: 100%;
            /* Full width */
            height: 100%;
            /* Full height */
            overflow: auto;
            /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);
            /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);
            /* Black w/ opacity */
        }
        /* Modal Content/Box */
        .modal-content {
            background-color: #fefefe;
            margin: 15% auto;
            /* 15% from the top and centered */
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
            /* Could be more or less, depending on screen size */
        }
        /* The Close Button */
        .close {
            color: #aaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: black;
            text-decoration: none;
            cursor: pointer;
        }
    </style>
    <script>
        // Get the modal
        var modal = document.getElementById('myModal');
        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
        // When the user clicks on the button, open the modal 
        btn.onclick = function () {
            modal.style.display = "block";
            setTimeout(() => {
                span.onclick()
        }, 5000);
        }
        // When the user clicks on <span> (x), close the modal
        span.onclick = function () {
            modal.style.display = "none";
        }
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>
</body>

</html>

Islas Juan Pablo Juan Pablo

student•

Documentación de la función setTimeout():

Mateo Gomez

student•

Esta es mi solucion convinado con la clase de modal que se menciona en el video

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mi modal con setTimeout</title>
    <style>
      body {
        display: flex;
        /* align-items: center; */
        justify-content: center;
        margin: 0;
        font-family: Arial;
      }
      .modal {
        width: 500px;
        height: 200px;
        background: grey;
        animation: modalIn .8s;
        padding: 2em;
        border-radius: 10px;
        text-align: center;
        color: white;
        position: fixed;
        top: 300px;

      }
      @keyframes modalIn {
        0% {
          transform: translateX(-3000px);
        }
        100% {
          transform: translateX(0px);
        }
      }
      @keyframes modalOut {
        0% {
          transform: translateX(0px);
        }
        100% {
          transform: translateX(3000px);
        }
      }
    </style>
  </head>
  <body>
    <div class="modal" id="hide-modal">
      <h1>ATENCION!</h1>
      <p>Esta es mi propia animacion con juegos de azar y mujerzuelas</p>
    </div>
    <script>
    const $modal = document.getElementById('hide-modal')
      setTimeout(() => {
        $modal.style.animation = 'modalOut .8s forwards'
        console.log('Ya termine tu animacion');
      }, 3000)
    </script>
  </body>
</html>```

Miguel Angel Espeso Alvarez

student•

Hola, espero no te molestes, me guie de ejercicio para construir el mío. Puedes echarle un vistazo a ver qué te parece, le puse en los aportes…
Gracias…

Jesus Armando Guerra Garcia

company_admin•

var modal = document.getElementById('myModal');

setTimeout(() =>{
 modal.style.display = 'none';},5000)```

Camila Di Virgilio

student•

dejo por aquí una gran explicación de como funciona el setTimeout además sirve como complemento para el tema del eventLoop, espero les sea de gran ayuda como lo fue para mi 😄

Iván Toro

student•

Es increíble como puede explicar tan bien.

Carlos Francisco Betancourt Requena

student•

Pues así rápidamente:

<script>
    const $hideButton = document.getElementById('hide-modal');
    const $modal = document.getElementById('modal');
    const $overlay = document.getElementById('overlay');

    // $hideButton.addEventListener('click', (event) => {
    //   // console.log(event);
    //   $modal.style.animation = 'modalOut .8s forwards';
    //   $overlay.classList.remove('active');
    // });

    setTimeout(() => {
        $modal.style.animation = 'modalOut .8s forwards';
        $overlay.classList.remove('active');
    }, 5000);
  </script>```

Armando Torres

student•

Esta es mi implementacion del setTimeout

const btn = document.getElementById('btn')
const modal = document.getElementById('modal')

btn.onclick = () => {
  modal.style.display = 'block'
  setTimeout(() => {
    modal.style.display = 'none'
  },5000)
}```

Implementación de set timeout 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