¿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:

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.