Cómo usar setTimeout() en JavaScript explicado en 5 minutos o menos

Como desarrollador web, la capacidad de respuesta y la interactividad de su aplicación web son componentes clave de la experiencia del usuario. Para mejorar la experiencia del usuario de su aplicación, deberá agregar comportamientos dinámicos y tener control sobre el tiempo en que se ejecutan ciertos fragmentos de código en su aplicación.

El método setTimeout() es una excelente herramienta para esto, ya que permite programar la ejecución de código, orquestarate animaciones, create temporizadores y gestionar asynchonrado operaciones en su aplicación.

Por lo tanto, es importante comprender la sintaxis de setTimeout(), cómo usarla y cómo puede aplicarla en su próximo proyecto. Este artículo explorará precisamente eso y lo equipará con el conocimiento adecuado para permitirle aprovechar al máximo el método setTimeout().

Función setTimeout de JavaScript

setTimeout () es un método global vinculado a la window objeto y se utiliza para ejecutar una función o un fragmento de código, después de un cierto período. Por ejemplo, si tiene una función que desea ejecutar después de cuatro segundos, setTimeout() es el método que usaría para lograrlo.

Cuando se usa, el método setTimeout() establece un temporizador que cuenta hacia atrás hasta que transcurre el tiempo que especificas, luego ejecuta la función o el código que le has pasado.

Ser un método global significa que setTimeout() se encuentra dentro del objeto global y, por lo tanto, está disponible en todas partes sin necesidad de importación. El objeto global, que es proporcionado por el Modelo de objetos de documento (DOM) en el browser, está referenciado por el nombre de la propiedad window.

Por lo tanto, podemos usar window.setTimeout() o simplemente setTimeout() como objeto global window estará implícito. window.setTimeout () y setTimeout () no tienen diferencia.

La sintaxis general para setTimeout() es la siguiente:

setTimeout(function, delay)

• función – esta es la función que se ejecutará después de un tiempo determinado. 
• retrasar – tiempo en milisegundos después del cual se ejecutará la función pasada. 1 segundo equivale a 1000 milisegundos.

Cuando usas setTimeout () el retraso que especifique debe ser un valor numérico para evitar resultados no deseados. El retrasar El argumento es opcional. Si no se especifica, el valor predeterminado es 0 y la función pasada se ejecuta inmediatamente.ately.

setTimeout() devuelve un identificador único conocido como ID de tiempo de espera, que es un número entero positivo que identifica de forma única la creación del temporizador.ated cuando se llama a un método setTimeout().

También es importante tener en cuenta que setTimeout() es unsynccronoso. Su temporizador no detiene la ejecución de otras funciones en la pila de llamadas.

Cómo utilizar setTimeout()

Veamos ejemplos que muestran cómo usar el método setTimeout():

// setTimeout() with a function declaration
setTimeout(function () {
  console.log("Hello World after 3 seconds");
}, 3000)

// setTimeout() with an arrow function
setTimeout(() => {
  console.log("Hello World in an arrow function - 1 second")
}, 1000)

Salida:

Hello World in an arrow function - 1 second
Hello World after 3 seconds

En la salida anterior, el segundo setTimeout () cierra sesión en su salida primero porque tiene un retraso más corto de 1 segundo, en comparación con el primero que tiene un retraso de 3 segundos. Como se señaló anteriormente, setTimeout() es unsynccronoso. Cuando se llama al primer setTimeout() con un retraso de 3 segundos, se inicia un temporizador de 3 segundos pero no detiene la ejecución del otro código en el programa.

A medida que el método cuenta hacia atrás desde 3, se ejecuta el resto del código en la pila de llamadas. En este ejemplo, la siguiente pieza de código es la segunda setTimeout () con un retraso de 1 segundo. Dado que tiene un retraso mucho más corto, es por eso que su código se ejecuta antes del primer setTimeout()

Cuando usas setTimeout (), no tiene que escribir directamente la función en el método setTimeout().

// function declaration
function greet() {
  console.log("Hello there!")
}

// store a function in a variable - function expression
const speak = function () {
  console.log("How are you doing?")
}

// using an arrow function
const signOff = () => {
  console.log("Yours Sincerely: Geekflare:)")
}

// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)

Salida:

Hello there!
How are you doing?
Yours Sincerely: Geekflare:)

Cuando definimos un método en otro lugar, luego lo pasamos setTimeout(), lo que pasamos al método setTimeout() es una referencia a la función que queremos ejecutar después de un tiempo determinado.

setTimeout() con parámetros adicionales

setTimeout() tiene una sintaxis alternativa que le permite pasar parámetros adicionales al método setTimeout(). Estos parámetros se utilizarán en la función que ejecute después del retraso.

La sintaxis es la siguiente:

setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)

Puede pasar cualquier número dado de parámetros adicionales según el número de argumentos que necesita la función a la que hace referencia.

Considere la siguiente función:

function greet (name, message) {
  console.log(`Hello ${name}, ${message}`)
}

Si desea ejecutar la función anterior después de una cierta cantidad de tiempo usando setTimeout(), puede hacerlo como se muestra a continuación:

// setTimeOut() with additional parameters
function greet (name, message) {
  console.log(`Hello ${name}, ${message}`)
}

setTimeout(greet, 2000, "John", "happy coding!");

Salida:

Hello John, happy coding!

Recuerde, si definimos una función en otro lugar y luego la pasamos a setTimeout(), lo que pasamos es simplemente una referencia a la función. En el ejemplo anterior, pasamos la referencia saludar y no saludar(), que llama a la función. Queremos que setTimeout() sea el que llame a la función usando su referencia.

Es por eso que no podemos pasar directamente los parámetros adicionales, como se muestra a continuación:

// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);

En el código anterior, la función de saludo se ejecuta inmediatamente.ately sin esperar a que transcurran 2 segundos. Luego se arroja un error. El resultado de ejecutar el código se muestra a continuación:

Cancelando setTimeout()

Podemos prevent la ejecución de una función programada usando setTimeout() usando el método borrar tiempo de espera (). Tal cosa puede ser necesaria si hemos configurado una función para que se ejecute después de un cierto período, pero no queremos que la función se ejecute después de que se cumplan ciertas condiciones o cambien las condiciones.

La sintaxis para clearTimeout () método es como se muestra a continuación:

clearTimeout(timeoutID)

clearTimeout() toma un solo argumento, ID de tiempo de espera, que es el identificador único devuelto por el método setTimeout().

Considere el siguiente ejemplo:

function text() {
  console.log("This is not going to be printed")
}

function greet() {
  console.log("Hello after 5 seconds")
}

// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);

// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)

// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)

Salida:

2 cleared out
Hello after 5 seconds

La función text() no se ejecuta como clearTimeout () se utiliza para cancelar su tiempo de espera, por lo tanto preventrando en su ejecución.

Ventajas de usar setTimeout()

Algunas de las ventajas de usar el método setTimeout() incluyen:

• Retrasar la ejecución del código: La función principal de setTimeout() es permitir a los desarrolladores retrasar la ejecución del código. Esta es una característica crucial al crear animaciones, gestión de eventos cronometrados y también controlando el flujo de unasyncCódigo cronoso. setTimeout() también libera el hilo principal para ejecutar otro código.
• Implementación del temporizador – setTimeout() proporciona una forma sencilla de implementar temporizadores simples en una aplicación sin necesidad de utilizar bibliotecas externas o realizar tareas complejas.ate operaciones.
• Estrangulamiento y antirrebote: setTimeout() se puede usar para limitar la cantidad de veces que se llaman ciertas funciones o se realizan acciones, particularmente durante eventos como desplazarse o escribir. Con la eliminación de rebotes, su aplicación espera un cierto período de tiempo antes de llamar a una función. La regulación limita el número de llamadas a funciones realizadas dentro de un período de tiempo determinado. setTimeout() se puede usar para lograr ambos
• Mejore la experiencia del usuario: setTimeout() le permite mejorar la de usuario mejorada de su aplicación controlando cuándo ocurren ciertas acciones, como cuando notificaciones, alertas, mensajes emergentes y animase muestran las ciones. Esto es útil en prevgenerando una sobrecarga de información en los usuarios, mejorando así la experiencia del usuario.
• Mejore el rendimiento web: setTimeout() se puede usar para mejorar el rendimiento y la capacidad de respuesta general de las aplicaciones web al dividir problemas complejos en problemas más pequeños y mucho más simples. Estos problemas más pequeños se pueden manejar dentro de setTimeout(), lo que permite que otras partes del código continúen ejecutándose, sin afectar el rendimiento o la capacidad de respuesta de una aplicación. 

Claramente, setTimeout() es poderoso y muy útil cuando se construyen aplicaciones usando JavaScript.

Desventajas de usar setTimeout()

Algunas de las desventajas de usar setTimeout() incluyen:

• Inacurrirate sincronización – setTimeout() no puede garantizar la hora exacta en que se llamará a una función o se realizará una operación. En ocasiones, otro código mal escrito genera condiciones de carrera que afectarán el funcionamiento de setTimeout(). Cuando utilizas varios setTimeout() superpuestos, no siempre puedes estar seguro del orden de ejecución, especialmente si hay otro.syncoperaciones cronosas están involucradas
• Infierno de devolución de llamada – Si tiene demasiadas llamadas setTimeout() anidadas, su código puede volverse difícil de leer y depurar. También será muy difícil seguir el flujo de la lógica en su aplicación. El uso de demasiados setTimeout() también puede generar problemas de memoria en su aplicación si las llamadas a setTimeout() no se manejan correctamente.

Mientras que setTimeout() puede prevSiguiendo las mejores prácticas y las buenas prácticas de codificación, puede minimizar o evitar por completo las desventajas de su aplicación.

Para Concluir

El método setTimeout() se puede utilizar para retrasar la ejecución de funciones. setTimeout se usa comúnmente para animaciones, retraso en la carga de contenido y manejo de tiempos de espera para solicitudes.

Por ejemplo, puede usar setTimeout() para mostrar alertas en sus páginas web. Mientras que setTimeout() no garantiza la hora exacta en que se ejecuta una función, garantiza su ejecución después de un retraso establecido.

También puede explorar ORM de JavaScript platFormularios para una codificación eficiente.