[JavaScript] setTimeout

끝이 보이지 않는 자바스크립트 

하나씩 배우다 보면 기본기가 탄탄해질까 한다.

 

오늘의 주제는 setTimeout

 

 

setTimeout은 일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 한다.

 

 

실시간 날씨 정보를 업데이트 해줘야 하는 문제가 생겨서

주기적으로 갱신할 수 있는 방법을 찾다가 알게 되었다.

 

---

문법은 이렇다.

let timerId = setTimeout(function, [delay], [arg1], [arg2], ...)

function 실행하고자 하는 함수 

delay 실행하기 전 대기 시간이며 기본값은 0이다, 단위는 밀리초(millisecond)

arg1, arg2  함수에 전달할 인수들

 

예시가 있어야 이해가 잘가므로 바로 예시를 보자.

 

기본 형태

function hello() {
	alert('Hello')
 }
setTimeout(Hello, 1000);

실행하면 1초 뒤에 Hello가 실행되어 알림창이 뜬다.

 

인수를 넘겨줄 경우 아래와 같이 작성하면 된다.

function condition(day, emotion) {
            alert(day + ' is ' + emotion);
        }
        setTimeout(condition, 1000, "Sunday", "good");

실행하면 1초 뒤에 알림창에 Sunday is good이 출력된다.

 

중첩 setTimeout

일정시간을 간격으로 실행하는 방법도 있다. setInterval로 쉽게 할 수 있지만 setTimeout은 서버가 과부하 일 때 요청 간격을 조정할 수 있어 더 용이하다.

 

let count = 0;

function add() {
   count++;
   console.log(count);
   }

setTimeout(function request() {
   add();
   setTimeout(request, 1000);
   }, 1000);

중첩이란 말그대로 setTimeout 안에 request 함수를 선언하고 그 함수 안에 setTimeout을 통하여 다시 request함수를 1초마다 실행시키게 하였다. 처음 1초 뒤에 request 함수가 실행되고 나서 request 안의 setTimeout으로 인해 1초 뒤에 한번 더 request함수가 실행되어 count가 1 증가한다. 이후 1초마다 반복되어 count는 1씩 올라간다.

 

count가 1씩 증가한는 것이 찍히고 있다.

 

이런식으로 주기적으로 실행하는 함수를 만들 수 있다. 그리고 반복되는 시간을 정해줬지만 반복 주기를 변수로 한 다음에 서버가 과부화 됐을 때마다 요청 시간을 증가시키도록 만들 수 있다.

 

let delay = 5000;

let time = setTimeout(function request() {
  서버로 요청하기
  
  if(서버 과부하로 요청 실패시) {
  delay *= 2; // 요청 시간을 2배로 늘립니다.
  }
  
  time = setTimeout(request, delay);
}, delay);

서버 요청이 실패될 때마다 setTimeout의 주기(delay)가 2배씩 늘어난다.

 

cleartTimeout()

반복 실행을 하도록 했다면 멈춰야 할 일도 생길 것이다. setTimeout()을 멈추게 하는 함수가 바로 clearTimeout이다. 사용법은 간단하다. setTimeout을 표현식 사용하여 작성하고, 저장된 변수를 clearTimeout 안에 넣으면 된다.

 

let time = setTimeout(...);
clearTimeout(time);

위와 같이 clearTimeout 함수를 호출하여 setTimeout을 중지시킬 수 있다.

 

 

한줄 느낀 점

 

자주 쓰게 될 함수 같다. 이런 자동화 기능이 바로 컴퓨터가 존재하는 이유라 생각한다. 화이팅 !