O setTimeout() Função em Angular
-
Função
setTimeout()
em Angular usando IIFE e recursão de função -
Função
setTimeout()
passando a lista de valores 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:
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:
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