Angular의 setTimeout() 함수

IIFE(Immediate Invoked Function Expression)와 함수 재귀를 사용하여 Angular의 setTimeout() 함수를 소개합니다. 또한 대기하고 싶은 시간 목록을 전달하고 재귀적으로 반복하여 Angular의 setTimeout() 함수를 소개합니다.

IIFE 및 함수 재귀를 사용하는 Angular의 setTimeout() 함수

다양한 이유로 setTimeout() 함수를 사용할 수 있습니다. 동기적으로 수행할 작업 사이에 Angular가 변경 감지를 한 번 실행하도록 하는 것이 가장 좋습니다.

setTimeout()은 타이머가 완료되면 함수를 호출하여 콜백 함수를 실행하도록 타이머를 설정하는 네이티브 JavaScript 함수입니다.

간단한 setTimeout() 함수 예:

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

출력:

위의 코드 블록에서 정수 i와 max를 정의하고 반복 기능을 사용하여 조건이 충족될 때까지 시간 초과를 반복했습니다.

i 값이 max보다 커지면 이 루프가 중단됩니다. i 값이 max 값 아래에 있으면 1초마다 반복되고 waited for: 1 to 5 seconds가 인쇄됩니다.

Angular에서 값 목록을 전달하여 setTimeout() 함수

프로그램이 대기하고 콜백 함수를 실행할 값 목록이 있는 경우 배열이 완료될 때까지 배열을 매개변수로 전달하고 실행하도록 함수를 설정할 수 있습니다.

예제 코드:

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);

출력: