Timer 관련 함수: setInterval, setTimeout

[devSoyoung]

Timer 관련 함수 정리

타이머 함수의 활용

• 지연 실행 : 특정 함수나 기능을 바로 실행하지 않고, 약간의 시간이 지난 후에 실행하고 싶을 때 예) 어떤 정보를 표시한 후, 몇 초 뒤에 다른 페이지로 이동
• 반복 실행 : 특정 함수를 지속적으로 반복 실행하고 싶을 때 예) 1분마다 화면을 갱신하기 위해서 새로운 정보 요청, 남은 로그인 유지 시간 표시

지연실행 : Timer

setTimeout(fn, delay);

일정시간 후 함수를 한 번만 실행

반복실행 : Interval

setInterval(fn, delay);

일정시간 마다 함수를 실행

setInterval(function() {                // 1초마다 출력
    console.log('setInterval');
}, 1000);
setInterval(console.log('setInterval'), 1000);      // 1번만 출력

주의할 점은 함수 안의 내용을 반복적으로 수행하는 것(함수 자체를 반복해주지 않음)

setInterval은 timerId(int)를 반환하므로, 이를 활용해서 clearInterval로 반복을 멈출 수 있음

clearInterval로 반복 취소하기

const timerId = setInterval(function() {
    // 반복할 내용
}, 1000);
if (정지할 조건) clearInterval(timerId);

타이머 함수 활용

setTimeout, setInterval 동시에 활용하기

const intervalId = setInterval(function() {
    // 수행할 내용
}, 1000);

setTimeout(function() {
    clearInterval(invervalId);
}, 50000);

setInterval로 반복실행하다가 정해진 시간 후에 clearInterval을 실행(setTimeout)해서 반복을 중지시킴