setTimeout()

장혜식·2021년 8월 7일
1

JavaScript

목록 보기
2/6

함수를 당장 실행하지 않고 타이머처럼 지정한 시간 이후에 함수를 실행하고 싶을 때
"호출 스케쥴링" 이라는 것이 있습니다.
"호출 스케쥴링"을 구현하기 위해 두가지 메소드가 존재합니다.

setTimeout() 은 일정 시간 간격 이후에 함수가 한번 실행됩니다.
setInterval 은 일정 시간 간격으로 함수가 주기적으로 실행됩니다.

● setTimeout()

* 문법

let timeoutId = setTimeout(func || code, delay, [param1,param2]))

func || code - 실행하고자 하는 함수, 또는 문자열 형태입니다.
대부분 이 자리에는 함수가 들어가고, 문자열 형태는 추천하지 않습니다.

delay - 함수를 실행하기 전 대기 시간입니다.
단위는 밀리초(millisecond, ex) 1000ms = 1s) 이며 기본값은 0입니다.

param1,param2... - 함수에 전달할 인수들입니다. IE9 이하에선 지원되지 않습니다.

* setTimeout() 의 사용 예시

function sayName (name, greeting) {
    alert(name + "아," + greeting)
};

setTimeout(sayName, 1000,"혜식","안녕") // 혜식아, 안녕

위 코드를 실행하면 1초 뒤에 혜식아, 안녕 이라는 alert 창이 화면에 뜹니다.

* setTimeout()을 사용할 때 주의사항

setTimeout(sayName(), 1000) ← 잘못된 방법

여기서 setTimeout()에 함수를 전달할 때 함수 뒤에 () 을 붙여서 작성하면 안됩니다.
setTimeout()은 함수의 참조값을 받도록 정의되어 있는데
함수 뒤에 () 을 작성해 인수로 전달하면 함수의 return 값이 전달됩니다.
여기서 sayName 함수 뒤에 () 을 작성해버리면 sayName 함수에는 return,
즉, 반환문이 없기 때문에 호출결과는 undefined 가 됩니다.
그래서 함수 뒤에 () 을 작성해서 setTimeout() 을 사용하면 setTimeout()
스케줄링 할 대상을 찾지 못해, 코드가 원하는 대로 실행되지 않습니다.

* clearTimeout

clearTimeout()을 사용하면 스케줄링이 취소됩니다.

let timerId = setTimeout(() => alert("안녕하세요"),1000)
alert(timerId) // 타이머 식별자

clearTimeout(timerId)
alert(timerId) // 위 타이머 식별자와 동일합니다.(취소 후에도 식별자의 값은 null 이 되지 않습니다.

위 예시를 봤을 때 timerId 는 숫자인 것을 알 수가 있습니다.브라우저 내부에서 타이머 식별자는 숫자입니다.
하지만 다른 환경에서는 타이머 식별자가 다른 자료형이 될 수도 있습니다.
예를 들어 Node.js에서는 setTimeout()을 실행하면 타이머 객체가 반환됩니다.

스케줄링에 관한 명세는 따로 없습니다. 그래서 호스트 환경마다 약간의 차이가 있을 수 있습니다.

profile
프로그래밍 기록공간

0개의 댓글