일정간격으로 함수를 호출할 때 setTimeout vs setInterval

fn함수를 1초간격으로 실행한다고 가정했을 때 예시코드.

setInterval(fn,1000)

setTimeout(function cbFn(){
    fn();
    setTimeout(cbFn,1000)
},1000)

setTimeout 과 setInterval의 차이는 콜백함수를 실행시키는 간격이다.

setInterval은 1초가 지날 때마다 콜백함수(fn)를 빵! 빵! 날린다. (종료 되는건 신경 안쓰고 그냥 실행만 냅다 시키고 시간초는 흘러간다.)

(출처: 모던 자바스크립트)

반면 setTimeout은 setTimeout이 재귀 호출되기 전에 fn함수가 실행 및 종료가 된 후에 setTimeout을 다시 호출한다. 즉, 함수가 종료된 후에 다시 1초를 기다리기 때문에 정확히 1초 간격으로 진행된다.

(출처: 모던 자바스크립트)

setTimeout의 또다른 장점은 반복적으로 setTimeout을 실행하는 것이기 때문에 필요한 조건에서의 시간초를 임의로 조절할 수 있다.

setTimeout(function cbFn(){
    fn();
    if(시간이 더 필요한 경우)  setTimeout(cbFn,1000*5)
    else  setTimeout(cbFn,1000)
},1000)

참조

• 모던 자바스크립트