[JS CS] forEach의 지연 처리

문제

Vue3의 Vuex에서 API를 호출하는 코드를 작성 중에 forEach가 지연적으로 처리되면 좋겠다고 생각했다.

const tags = ["ALONE", "PARTY", "LOVE", "SPECIAL"];
tags.forEach((tag) => {
  setTimeout(() => {
    dispatch("setThemeCocktails", tag);
  }, 1000);
});

1초에 한 번씩 setThemeCocktails actions를 호출할 것 같은 코드이다. 하지만 실상은 그렇지 않다.

위의 코드는 여러 개의 setTimeout 함수를 단번에 주르륵 호출한다. forEach의 각 단계를 늦출 순 없다. 여러 개의 setTimeout 함수가 한 번에 호출된 뒤 각각 1000ms씩 지연한 뒤 setTimeout 함수 내부를 진행한다. 즉, 거의 1초만에 전체가 모두 끝나는 것이다. 우리는 1초마다 setTimeout 함수를 호출하고 싶은 것이다.

해결

const tags = ["ALONE", "PARTY", "LOVE", "SPECIAL"];
tags.forEach((tag, i) => {
  setTimeout(() => {
    dispatch("setThemeCocktails", tag);
  }, i * 1000);
});

1. forEach의 각 item의 idx를 알 수 있다.
2. 이 idx에 1000ms를 곱하는 것이다.
3. 그렇다면 각 setTimeout은 0ms, 1000ms, 2000ms …. 로 idx에 비례하게 지연된다.
4. 이는 결과적으로 1초마다 setTimeout 내부 코드를 실행하는 것처럼 보이게 한다.

참고

• stackoverflow

• forEach() 반복 지연