[js] 자바스크립트로 시간차 지연 출력 (ft. for문, setTimeout, react)

js 시간차 출력

 

자바스크립트에서 시간차, 지연을 위한 

구현 방법입니다.

 

자바스크립트를 이용하여 시간차를 두고 출력하는 방법은 setTimeout와 async를 이용한 방법이 있습니다. 
여기서 데이터의 양이 많을 경우,
for문과 map을 이용해 setTimeout 을 사용하는 방법이 좋습니다.

 

for문, setTimeout 예제

1초 마다 0부터 4까지 시간차로 출력됩니다. 

const data = [1, 2, 3, 4, 5]
for (let i = 0; i < data.length; i++) {
  setTimeout(() => {
    console.log(i)
  }, i * 1000)
}
//결과
//0
//1
//2
//3
//4

 

map, for문, setTimeout 예제

데이터의 양이 많을 경우 map과 함께 이용하여 데이터를 순차적으로 출력할 수 있다. 

const data = [1, 2, 3, 4, 5]

for (let i = 0; i < data.length; i++) {
  setTimeout(() => {
     const array = [];
     array.push(data[i])
     array.map(v => console.log(v))
  }, i * 1000)
}
//결과
//1
//2
//3
//4
//5

 

화면 결과

Result를 클릭 후 개발자 도구를 열어 콘솔에 입력된 내용을 확인하세요