¿Cómo pausar la ejecución del código con setTimeout de javascript duran un tiempo?

Estrada Web Group
Estrada Web Group
¿Cómo pausar la ejecución del código con setTimeout de javascript duran un tiempo?

Resumen: en este tutorial, aprenderás a usar la función setTimeout() de JavaScript que establece un temporizador para detener la ejecución y reanudarla después de que expira el temporizador.

Introducción a la función setTimeout() de JavaScript

La función setTimeout() es un método o función del objeto window. setTimeout() establece un temporizador y ejecuta una función después de que expira el temporizador.

Lo siguiente ilustra la sintaxis de setTimeout():

let timeoutID  = setTimeout(cb [,delay], arg1, arg2,...);

En esta sintaxis:

  • cb es una función que se ejecutará después de que expire el temporizador.
  • delay es el tiempo en milisegundos que el temporizador debe esperar antes de ejecutar la función. Si lo omites, el retraso predeterminado es 0.
  • arg1, arg2, … son argumentos pasados a la función cb.

La función setTimeout() devuelve un timeoutID que es un número entero positivo que identifica el temporizador creado como resultado de llamar al método.

El timeoutID se puede usar para cancelar el tiempo de espera pasándolo al método clearTimeout().

Ejemplo de JavaScript setTimeout()

Lo siguiente crea dos botones simples y los enlaza con setTimeout() y clearTimeout().

Cuando haces clic en el botón Show, se invoca showAlert() y muestra un cuadro de diálogo de alerta después de 3 segundos. Para cancelar el tiempo de espera, haz clic en el botón Cancel.

HTML

<p>JavaScript setTimeout Demo</p>
<button onclick="showAlert();">Show</button>
<button onclick="cancelAlert();">Cancel</button>

JavaScript

var timeoutID;

function showAlert() {
    timeoutID = setTimeout(alert, 3000, 'setTimeout Demo!');
}

function clearAlert() {
    clearTimeout(timeoutID);
}

Resultado:
JavaScript setTimeout()

Cómo funciona JavaScript setTimeout()

JavaScript es de un solo subproceso, por lo que solo puede realizar una tarea a la vez. Significa que solo puede llevar a cabo una sola tarea en un momento dado. Además del motor de JavaScript, el navegador web tiene otros componentes como Event Loop, Call Stack y Web API.

Cuando se llama a setTimeout(), el motor de JavaScript crea un nuevo contexto de ejecución de función y lo coloca en la pila de llamadas.

La función setTimeout() ejecuta y crea un temporizador en el componente de Web API del navegador web. Cuando el temporizador expira, la función que se pasó en setTimeout() se coloca en la cola de ejecución.

El bucle de eventos supervisa tanto la pila de llamadas como la cola de devolución de llamadas. Elimina la función de devolución de llamada de la cola y la coloca en la pila de llamadas cuando la pila de llamadas está vacía.

Una vez que la función de devolución de llamada está en la pila de llamadas, se ejecuta.

Veamos el siguiente ejemplo para clarificar estos conceptos:

function task() {
    console.log('setTimeout Demo!')
}

setTimeout(task, 3000);

En este ejemplo:

Primero, setTimeout() se coloca en la pila de llamadas. Crea un temporizador en la Web API.

En segundo lugar, después de aproximadamente 3 segundos, el temporizador expira, la tarea se envía a la cola de devolución de llamada y se espera la próxima oportunidad para ejecutarse.

En tercer lugar, debido a que la pila de llamadas está vacía, el bucle de eventos elimina la task() de la cola de devolución de llamada, la coloca en la pila de llamadas y la ejecuta:

En cuarto lugar, se ejecuta console.log() en setTimeout() que crea un nuevo contexto de ejecución de función.

Finalmente, console.log() y task() se extraen de la pila de llamadas una vez que se completan.

Resumen

  • setTimeout() es un método del objeto window.
  • setTimeout() establece un temporizador y ejecuta una función cuando expira el temporizador.

 

Compartir artículo:

Más artículos geniales

Introducción al manejo de objetos en JavaScript

Introducción al manejo de objetos en JavaScript

Resumen: en este tutorial, aprenderás sobres los objetos de JavaScript y cómo manipular las propiedades de los objetos de manera efectiva.

Ver artículo completo

Manténgase actualizado

Obtenga excelente contenido en su bandeja de entrada todas las semanas.
Solo contenido excelente, no compartimos su correo electrónico con terceros.
Subir al inicio de la pantalla