setTimeout: 일정 시간이후에 함수를 실행 시켜준다.
setInterval: 일정 시간마다 함수를 실행 시켜준다.
자 생각을 해보자, 특정 시간마다 alert을 띄워주는 함수이다.
특정 시간마다라고 생각해보면, setInterval을 생각 할 수 있다.
setInterval(() => {
alert('called')
}, 1000)
자 이렇게 작성 하게되면 어떤 이슈가 있을까? 여기서 문제는 alert이 띄워진 상태에서도 시간이 지나고, 1초마다 콜백 실행이 태스크큐에 쌓인다는 것이 문제이다.
그러면 어떻게 해야 할까?
function setIntervalTimeout(cb, ms) {
return setTimeout(() => {
cb();
return setIntervalTimeout(cb, ms)
}, ms);
}
setIntervalTimeout(() => alert(1), 1000)
위처럼 사용 하면, interval 처럼 사용 하면서, alert이 종료된 이후에 스케쥴링을 등록을 하기 때문에, alert이 종료 된 이후에 스케쥴을 등록하게 되어, alert이 중첩실행 되지 않게 수정이 가능하다.
하지만 위에서 문제는... clearTimeout이 불가능 하다는 것이다. 자 그러면 어떻게 해야 할까?
function setIntervalTimeout(cb, ms) {
const ret = {}
ret.timeoutSeq = 0;
ret.timeoutSeq = setTimeout(function run() {
cb();
ret.timeoutSeq = setTimeout(run, ms)
}, ms);
return ret
}
const test = setIntervalTimeout(() => alert(1), 1000)
clearTimeout(test.timeoutSeq)
위처럼 객체를 전달하여, clearTimeout을 사용할 수 있게 하는 방법도 좋을 것이다.
function setIntervalTimeout(cb, ms) {
let timeoutSeq = 0
timeoutSeq = setTimeout(function run() {
cb();
timeoutSeq = setTimeout(run, ms)
}, ms);
return () => clearTimeout(timeoutSeq)
}
const clearIntervalTimeout = setIntervalTimeout(() => alert(1), 1000)
혹은 위 처럼 스케쥴의 리턴값 자체를 스케쥴 종료를 위한 함수로 제공 하는 것도 좋을 것이다.
댓글
댓글 쓰기