setTimeout / clearTimeout

일정 시간 뒤에 원하는 동작을 할 때는 setTimeOut을 쓰면 된다.

setTimeout 함수는 일정시간이 지난 후 함수가 한번 실행되고,
clearTimeout 함수는 setTimeout함수를 취소하는 역할을 한다.

*사용예제
  - 일정 시간 뒤 로그아웃 처리할 때
  - 몇초뒤에 이벤트 팝업을 띄울 경우

---

* setTimeout 함수

setTimeout( [함수 또는 문자열], [ 지연될 시간 ] , [인자1], [인자2], . . .  );

1. [함수 또는 문자열]
실행하려고 하는 코드로 함수자체를 넣거나, 함수명(문자열)을 입력한다. 보통 함수가 들어가고 호환성때문에 문자열도 받을 수 있지만 추천하지 않는다고 한다.

2. [지연될 시간]
실행 전 대기시간으로 입력한 시간만큼 지연되었다가 실행되는 것이다.
단위는, 밀리초이고 기본값은 0이다. (1초 = 1000밀리초)

3. [인자1],[인자2], . . . 
함수에 전달되는 인자들이다.
(IE9이하에서는 지원되지 않는다.)

---

 

[ 예시 1 ]

callback함수를 사용하여 setTimeout함수를 실행 시키는 경우.

setTimeout( function(){
    console.log('3초뒤에 호출 될 코드입니다!!!');
}, 3000);

 

 

[ 예시 2 ]

callback함수를 화살표함수 형태로 사용하여 setTimeout함수를 실행 시키는 경우.

setTimeout( ()=>{
    console.log('3초뒤에 호출 될 코드입니다!!!');
}, 3000);

 

 

[ 예시 3 ]

함수명을 이용하여 setTimeout함수를 실행 시키는 경우.

function timer(){
   console.log('3초뒤에 호출 될 코드입니다!!!');
}

var timerVar = setTimeout( timer, 3000);

 

 

[ 예시 4]

함수와 인자를 이용하여 setTimeout함수를 실행 시키는 경우.

function userInfo( name, age){
   console.log("이름은 " + name + " 입니다.");
   console.log("나이는 " + age + " 살 입니다.);
}

var timerVar = setTimeout( userInfo, 3000, "제니", "20" );

=>결과 : 이름은 제니 입니다.
             나이는 20살 입니다.

---

 

* clearTimeout 함수

clearTimeout( [식별자] );

Node.js에서 setTimeout을 호출 하면 타이머 식별자(timer identifier)가 반환된다.
setTimeout을 취소하고 싶을 때 이 반환된 식별자를 사용하면 된다.

 

[ 예시 ]

function timer(){
   console.log('3초뒤에 호출 될 코드입니다!!!');
}

var timerVar = setTimeout( timer, 3000);

clearTimeout(timerVar);

=> 결과
콘솔에 '3초뒤에 호출될 코드입니다!!!'라는 말이 보이지 않는다. 
왜냐하면, clearTimeout을 함수로 인해 3초뒤에 실행 할 것을 취소했기 때문!

 

 

 

 

참고:
https://ko.javascript.info/settimeout-setinterval