by leonardomso & jakeseo_me # #

10. setTimeout, setInterval and requestAnimationFrame

개발을 하다보면, 함수를 당장 실행하지 않고 정확히 몇 초의 딜레이 후에 실행하고 싶을 때가 있을 것입니다. 이것을 "호출 스케쥴링하기(scheduling a call)"라고 합니다.

이것을 구현하기 위해 두가지 메소드가 존재합니다.

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

위의 두 메소드들은 자바스크립트 스펙의 일부가 아닙니다. 하지만 대부분의 환경은 내부적인 스케쥴러를 갖고 있습니다. 그리고 이러한 메소드들을 제공합니다. 구체적으로는, Node.JS와 모든 브라우저에서 제공됩니다.

setTimeout

문법:

let timerId = setTimeout(func|code, [delay], [arg1], [arg2], ...);

파라미터: func|code 실행을 위한 함수나 문자열입니다. 주로, 함수를 받습니다. 히스토리적인 이유로, 코드의 문자열도 넘겨질수 있지만 권장되지는 않습니다.

delay 실행하기 전의 딜레이 입니다. ms단위로 이루어져 있습니다. 1000ms = 1s 입니다. 디폴트 값은 0이 들어있습니다.

arg1, arg2... 함수에 대한 인자(Arguments)들입니다. (IE9 미만의 버전에서는 지원되지 않습니다.)

예를 들어 1초 후에 sayHi()를 호출하는 코드를 작성해봅시다.

function sayHi() {
  alert('Hello');
}

setTimeout(sayHi, 1000);

인자를 줘봅시다.

function sayHi(phrase, who) {
  alert( phrase + ', ' + who);
}

setTimeout(sayHi, 1000, "Hello", "John"); // Hello, John

만일 첫번째 인자에 문자열이 들어온다면, 자바스크립트는 그로부터 함수를 만들어낼 것입니다.

무슨 말이냐면 다음 코드가 동작한다는 것입니다.

setTimeout("alert('Hello')", 1000);