[책] 자바스크립트 코드 레시피 278 - 196일차

지정 시간 후 작업 실행하기

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

구문

setTimeout(함수, 밀리초); 지정 시간에 함수 호출

설명

setTimeout()을 사용해 지정 시간(밀리초 단위) 후 함수를 실행할 수 있습니다. 자바스크립트는 스크립트의 코드를 위에서부터 순서대로 실행하지만, setTimeout()을 사용해 실행 타이밍과 순서의 지정이 가능합니다. setTimeout()은 한 번만 호출되며, 첫 번째 인수는 함수, 두 번째 인수는 지연 시간을 밀리초(1/1000초) 단위로 전달합니다.

실습

setTimeout()의 첫 번째 인수에는 익명 함수를 사용합니다.

let time = 1000;
setTimeout(timer, time);
function timer() {
  console.log('셋타임아웃');
}

---

setTimeout()과 function()을 함께 사용하면 this의 스코프가 변하는 경우 의도하지 않은 곳을 참조하는 경우가 발생합니다. 해당 문제를 피하기 위해서는 화살표 함수를 사용하는 것이 좋습니다.

let time = 1000;
setTimeout(function() {
  console.log(this);
}, time);

---

현재 시간을 표시하는 샘플을 확인해봅니다. console.log()로 시간을 표시하고 있으나 setTimeout()을 사용해 호출하는 코드는 실행 시작 후 1초 뒤 작업이 처리되는 것을 확인할 수 있습니다.

let time = 1000;
setTimeout( () => {
  console.log(this);
}, time);

---

코드 순서를 콘솔창에서 확인해봅니다.

let time = 1000;
console.log('시작', '1번 시작'); // 1번 시작
setTimeout(() => {
  console.log('setTimeout 실행 후 시간', new Date().toLocaleTimeString(), '3번 시작')
}, time); // 3번 시작
console.log('실행 시작 시간', new Date().toLocaleTimeString(), '2번 시작'); // 2번 시작

지정 시간 후 작업 실행 해제하기

• setTimeout() 처리를 해제하고 싶을 때

구문

clearTimeout(타이머ID); setTimeout() 호출 해제

설명

clearTimeout()을 사용해 setTimeout()으로 지정한 함수의 실행을 취소할 수 있습니다. 해제하고 싶은 타이밍에 맞춰 setTimeout()의 반환값인 타이머 ID(숫자 타입)를 clearTimeout()의 인수로 전달하면 지정한 함수의 호출이 해제됩니다.

실습

script.js

let time = 1000;
const timerID = setTimeout(timer, time);
function timer() {
  console.log('실행');
};
clearTimeout(timerID);