[Javascript] for, while 반복문에 async await를 활용해 delay 거는 방법

[Javascript] 반복문에 delay 거는 방법 (add a delay in a JavaScript loop)

자바스크립트 반복문에 딜레이 거는 방법에는 다양한 방법이 존재하겠지만, ES7 async/await 구문을 활용하면 굉장히 깔끔하게 이 부분을 제어할 수 있습니다. 이번 포스팅에서는 async/await을 활용해서 for 반복문, while 반복문에서 딜레이 거는 방법에 대해 소개해드리도록 하겠습니다.

사실 for문에서나 while문에서나 딜레이 거는 방법은 동일합니다. 반복문에 딜레이를 걸기 위해서는 비동기 함수로 반복문을 감싼 후 반복문 내부에서 순회를 할 때마다 await을 통해 딜레이를 걸어주는 방식입니다.

for문에서 delay 거는 방법

const timer = ms => new Promise(res => setTimeout(res, ms))

async function load () {
  for (var i = 0; i < 3; i++) {
    console.log(i);
    await timer(3000);
  }
  console.log('end');
}

load();

while문에서 delay 거는 방법

const timer = ms => new Promise(res => setTimeout(res, ms))

async function load () {
	let i = 5;
	while(i > 0) {
    console.log(i);
    await timer(3000);  
  	i--;
  }
  console.log('end')
}

load();