[JavaScript] 자바스크립트에서 지정 시간 후 작업 실행하기

212_자바스크립트에서 지정 시간 후 작업 실행하기

[적용]

• 작업의 처리를 지연시키고 싶을 때
• 비표시 요소를 지정 시간 경과 후 표시하고 싶을 때

---

[문법]

메소드	의미	반환
setTimeout(함수, 밀리초)	지정 시간에 함수 호출	숫자

---

[내용]

setTimeout()을 사용해 지정 시간(밀리초 단위) 후 함수를 실행할 수 있다.

자바스크립트는 스크립트의 코드를 위에서부터 순서대로 실행하지만,

setTimeout()을 사용해 실행 타이밍과 순서의 지정이 가능하다.

setTimeout()은 한 번만 호출되며, 첫 번째 인수는 함수,

두번째 인수는 지연 시간을 밀리초(1/1000초) 단위로 전달한다.

JavaScript                                                                                                                                                          main.js

setTimeout(timer1, 1000);  // 1000밀리초 후 실행
function timer1() {
  // 처리 작업
}

 

setTimeout()의 첫 번째 인수에는 익명 함수(Anonymous Function)를 사용한다.

JavaScript                                                                                                                                                          main.js

setTimeout(function() {
  // 처리 작업
  console.log(this);  // window 객체
}, 1000);  // 1000밀리초 후 실행

 

setTimeout()과 function()을 함께 사용하면 this의 스코프가 변하는 경우 의도하지 않은 곳을 참조하는 경우가 발생한다.

해당 문제를 피하기 위해서는 화살표 함수(Arrow Function)를 사용하는 것이 좋다.

JavaScript                                                                                                                                                          main.js

setTimeout(() => {
  // 처리 작업
  console.log(this);  // 해당 객체
}, 1000);  // 1000밀리초 후 실행

 

현재 시간을 표시하는 샘플을 확인해 보자.

console.log()로 시간을 표시하고 있으나 setTimeout()을 사용해 호출하는 코드는

실행 시작 후 1초 뒤 작업이 처리되는 것을 확인할 수 있다.

JavaScript                                                                                                                                                          main.js

console.log('실행 시작 시간', new Date().toLocaleTimeString());

setTimeout(() => {
  // 처리 작업
  console.log('setTimeout 실행 후 시간', new Date().toLocaleTimeString());
}, 1000);  // 1000밀리초 후 실행

 

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김