[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씩 올라간다.
이런식으로 주기적으로 실행하는 함수를 만들 수 있다. 그리고 반복되는 시간을 정해줬지만 반복 주기를 변수로 한 다음에 서버가 과부화 됐을 때마다 요청 시간을 증가시키도록 만들 수 있다.
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을 중지시킬 수 있다.
한줄 느낀 점
자주 쓰게 될 함수 같다. 이런 자동화 기능이 바로 컴퓨터가 존재하는 이유라 생각한다. 화이팅 !