O setTimeout() Função em Angular

Rana Hasnain Khan 15 fevereiro 2024
  1. Função setTimeout() em Angular usando IIFE e recursão de função
  2. Função setTimeout() passando a lista de valores em Angular
O setTimeout() Função em Angular

Apresentaremos a função setTimeout() do Angular usando a Expressão de Função Imediatamente Invocada (IIFE) e a recursão de função. Também introduziremos a função setTimeout() do Angular passando uma lista de vezes que queremos esperar e iterá-los recursivamente.

Função setTimeout() em Angular usando IIFE e recursão de função

Podemos usar a função setTimeout() por vários motivos. É melhor permitir que o Angular execute a detecção de alterações uma vez, entre as ações que, de outra forma, executaríamos de forma síncrona.

setTimeout() é uma função JavaScript nativa que define um cronômetro para executar uma função de retorno de chamada, chamando a função assim que o cronômetro terminar.

Um exemplo de função setTimeout() simples:

let i = 0;
let max = 5;
(function repeat(){
  if (++i > 5) return;
  setTimeout(function(){
    console.log("waited for: " + i + " seconds");
    repeat();
  }, 1000);
})();

Resultado:

Função setTimeout em Angular usando IIFE e recursão de função

No bloco de código acima, definimos um inteiro i e max e usamos uma função de repetição para repetir nosso tempo limite até que a condição seja satisfeita.

Se os valores i forem maiores que max, este loop será interrompido. Se o valor de i permanecer abaixo do valor max, ele se repetirá a cada 1s e imprimirá waited for: 1 to 5 seconds.

Função setTimeout() passando a lista de valores em Angular

Se tivermos uma lista de valores para os quais queremos que nosso programa espere e execute a função de retorno de chamada, podemos definir nossa função para passar um array como um parâmetro e executar até que o array esteja completo.

Código de exemplo:

let waitList = [5000, 4000, 3000, 1000];

function setDelay(times) {
  if (times.length > 0) {
    // Remove the first time from the array
    let wait = times.shift();
    console.log("Waiting For: " + wait/1000 + " seconds");
    
    // Wait for the given amount of time
    setTimeout(() => {
        console.log("Waited For: " + wait/1000 + " seconds");
        // Call the setDelay function again with the remaining times
        setDelay(times);
    }, wait);
  }
}

setDelay(waitList);

Resultado:

Função setTimeout ao passar a lista de valores no Angular

Rana Hasnain Khan avatar Rana Hasnain Khan avatar

Rana is a computer science graduate passionate about helping people to build and diagnose scalable web application problems and problems developers face across the full-stack.

LinkedIn