함수를 당장 실행하지 않고 타이머처럼 지정한 시간 이후에 함수를 실행하고 싶을 때
"호출 스케쥴링" 이라는 것이 있습니다.
"호출 스케쥴링"을 구현하기 위해 두가지 메소드가 존재합니다.
*setTimeout()
은 일정 시간 간격 이후에 함수가 한번 실행됩니다.
*setInterval
은 일정 시간 간격으로 함수가 주기적으로 실행됩니다.
let timeoutId = setTimeout(func || code, delay, [param1,param2]))
func || code
- 실행하고자 하는 함수, 또는 문자열 형태입니다.
대부분 이 자리에는 함수가 들어가고, 문자열 형태는 추천하지 않습니다.
delay
- 함수를 실행하기 전 대기 시간입니다.
단위는 밀리초(millisecond, ex) 1000ms = 1s) 이며 기본값은 0입니다.
param1,param2...
- 함수에 전달할 인수들입니다. IE9 이하에선 지원되지 않습니다.
function sayName (name, greeting) {
alert(name + "아," + greeting)
};
setTimeout(sayName, 1000,"혜식","안녕")
// 혜식아, 안녕
위 코드를 실행하면 1초 뒤에 혜식아, 안녕 이라는 alert 창이 화면에 뜹니다.
setTimeout(sayName(), 1000)
← 잘못된 방법
여기서 setTimeout()
에 함수를 전달할 때 함수 뒤에 ()
을 붙여서 작성하면 안됩니다.
setTimeout()
은 함수의 참조값을 받도록 정의되어 있는데
함수 뒤에 ()
을 작성해 인수로 전달하면 함수의 return
값이 전달됩니다.
여기서 sayName
함수 뒤에 ()
을 작성해버리면 sayName
함수에는 return
,
즉, 반환문이 없기 때문에 호출결과는 undefined
가 됩니다.
그래서 함수 뒤에 ()
을 작성해서 setTimeout()
을 사용하면 setTimeout()
은
스케줄링 할 대상을 찾지 못해, 코드가 원하는 대로 실행되지 않습니다.
clearTimeout()
을 사용하면 스케줄링이 취소됩니다.
let timerId = setTimeout(() => alert("안녕하세요"),1000)
alert(timerId)
// 타이머 식별자
clearTimeout(timerId)
alert(timerId)
// 위 타이머 식별자와 동일합니다.(취소 후에도 식별자의 값은 null 이 되지 않습니다.
위 예시를 봤을 때 timerId 는 숫자인 것을 알 수가 있습니다.브라우저 내부에서 타이머 식별자는 숫자입니다.
하지만 다른 환경에서는 타이머 식별자가 다른 자료형이 될 수도 있습니다.
예를 들어 Node.js에서는 setTimeout()
을 실행하면 타이머 객체가 반환됩니다.
스케줄링에 관한 명세는 따로 없습니다. 그래서 호스트 환경마다 약간의 차이가 있을 수 있습니다.