Usar setTimeout() en jQuery

setTimeout() es una función integrada de JavaScript, no un método de jQuery. Puedes llamarla desde código jQuery para actualizar un elemento, iniciar una animación o programar otra acción cuando transcurra un intervalo. La función de retorno de llamada se ejecuta una sola vez; usa un intervalo si la acción debe repetirse.

Qué hace setTimeout() en jQuery

El navegador programa una función de retorno de llamada para un turno posterior de su bucle de eventos. jQuery no ofrece una API de temporizador independiente: proporciona métodos prácticos, como .text() y .animate(), que puede llamar esa función. El retardo solicitado es un umbral mínimo de programación, no una garantía de que la función se ejecute en un momento exacto.

Sintaxis y argumentos de setTimeout()

La forma de la función es setTimeout(callback, delay, ...args). callback es la función que se invocará; delay es el número de milisegundos que deben transcurrir antes de que pueda ejecutarse, y los argumentos opcionales se pasan a la función de retorno de llamada. Es preferible usar una función como retorno de llamada en vez de una cadena de código: las cadenas son más difíciles de mantener y pueden causar problemas de seguridad.

Por ejemplo, este ejemplo independiente de JavaScript ilustra la función de retorno de llamada y el retardo. No se ejecutó en este paquete, por lo que no se afirma ningún resultado observado:

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

setTimeout(() => {
  console.log("The callback ran");
}, 1000);

Ejecutar código jQuery después de un retardo

En una página que cargue jQuery, llama a sus métodos dentro de la función de retorno de llamada. Este ejemplo de código de una página cambia el párrafo una sola vez, después de hacer clic en el botón y de que transcurra el retardo. Es una ilustración estática: depende del DOM del navegador y del script de jQuery cargado desde la red, por lo que no afirma que se haya obtenido un resultado en tiempo de ejecución.

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<p id="message">Waiting for an update.</p>
<button id="change">Change the message</button>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
  $("#change").on("click", function () {
    setTimeout(function () {
      $("#message").text("The delayed update ran.");
    }, 1000);
  });
</script>

El retardo comienza con cada clic. Si el usuario hace varios clics, cada uno programa su propia función de retorno de llamada; conserva y cancela los identificadores de los temporizadores si solo debe surtir efecto la solicitud más reciente.

Programar animaciones de jQuery

Puedes programar llamadas independientes a .animate() para que comiencen con distintos desfases. Para crear una secuencia, ten en cuenta la duración de cada animación: un segundo temporizador programado para 2,000 milisegundos después del clic inicial no queda automáticamente programado para después de que termine la primera animación. Para secuenciar las acciones con más claridad, programa la siguiente desde la función de retorno de llamada que se ejecuta al terminar la primera animación: $("#box").animate({ left: "+=100px" }, 1000, function () { $(this).animate({ top: "+=100px" }, 1000); });. Se presupone una página con jQuery y un elemento con el ID box cuya posición CSS no sea estática, por ejemplo position: relative; establece esa posición antes de ejecutar la animación para que tanto left como top puedan mover el elemento. La primera animación solicita un desplazamiento de un segundo; la siguiente comienza cuando se ejecuta su función de retorno de llamada. La carga del navegador y el renderizado pueden afectar el tiempo real transcurrido.

Cancelar un temporizador programado

Guarda el valor que devuelve setTimeout() y pasa ese identificador a clearTimeout() antes de que se ejecute la función de retorno de llamada. En un controlador de clic de jQuery, declara let timer; y luego asigna timer = setTimeout(function () { $("#message").text("The delayed update ran."); }, 3000); en el controlador de #start; en el controlador de #cancel, llama a clearTimeout(timer);. Esta ilustración de sintaxis presupone que existen los elementos con los ID start, cancel y message, además de jQuery. La cadena visible The delayed update ran. permanece en inglés porque forma parte del ejemplo de código. clearTimeout() impide que se ejecute una función de retorno de llamada pendiente; no puede deshacer una que ya haya comenzado. Si cada acción de inicio crea un temporizador nuevo, decide si conviene cancelar primero el anterior para evitar que se acumulen varias actualizaciones pendientes.

Tiempos e identificadores de temporizador

Un retardo de 0 también programa la función de retorno de llamada de forma asíncrona; no hace que se ejecute en línea antes de la siguiente instrucción. El navegador puede ejecutarla después del retardo solicitado si hay otras tareas en cola o la página está ocupada. Guarda el identificador del temporizador devuelto solo si necesitas cancelar esa función programada y pásalo de nuevo a clearTimeout(); para este uso no necesitas conocer su representación.