🌞 setTimeout과 setInterval

🌥 setTimeout과 setInterval을 이용한 호출 스케줄링

일정 시간이 지난 후에 원하는 함수를 예약 실행(호출)할 수 있게 하는 것을 '호출 스케줄링(scheduling a call)'이라고 한다. 호출 스케줄링을 구현하는 방법은 두 가지가 있다.

• setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
• setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법

🌧 1. setInterval

일정한 시간 간격으로 작업을 수행하기 위해서 사용한다.clearInterval 함수를 사용하여 중지할 수 있습니다. 주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있다.

• 보통 아래와 같이 사용한다.

undefined

//Hello!라는 문자열을 콘솔에 3초에 1번씩 실행합니다. function test() { console.log("Hello!"); } setInterval(test, 3000);

• 위 test 함수에 인자가 있다면?

undefined

function test(string) { console.log(string); } setInterval(function() { test("Hello!"); }, 3000);

• 위 방법을 응용하여 여러 함수를 인자로 넣어서 실행해 보자

undefined

function test1(string) { console.log("test1 : " + string); } function test2(string) { console.log("test2 : " + string); } setInterval(function() { test1("Hello!"); test2("World!"); }, 3000); //위와 같이 setInterval 함수 안에 함수를 인자로 넣고 실행하면 두개의 함수가 3초에 한번씩 실행됩니다. test1 : Hello! test2 : World! test1 : Hello! test2 : World!

• clearInterval clearInterval() 함수는 현재 진행되고 있는 함수의 진행을 멈추는데 쓰인다.

  • undefined

var interval = setInterval(function() { console.log("Interval"); }, 1000); //인자로 함수 이름 넣어줍니다. clearInterval(interval);

• undefined

var interval = setInterval(function() { count++; if (count === 10) { clearInterval(interval); } }, 3000);

---

🌧 2. setTimeout

일정한 시간 후에 작업을 한번 실행한다. 보통 재귀적 호출을 사용하여 작업을 반복한다. 기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식이다. 지정된 시간 사이에 작업 시간이 추가 되는 것이다. clearTimeout() 을 사용해서 작업을 중지한다.

undefined

//5초 후에 oneTime이라는 string를 콘솔에 1번 찍고 종료합니다. setTimeout(function() { console.log("oneTime"); }, 5000); self.scrollState = false; if (!self.scrollState) { self.mainElem.classList.add("running"); } self.scrollState = setTimeout(function() { self.mainElem.classList.remove("running"); }, 500); //setTimeout이 실행되면 상수를 리턴 함으로 true로 바뀐다.

---

❗ Point

** clearInterval(), clearTimeout()이 실행중인 작업을 중지시키는 것은 아니다. 지정된 작업은 모두 실행되고 다음 작업 스케쥴이 중지 되는 것이다.**

• setInterval(func, delay, ...args)과 setTimeout(func, delay, ...args)은 delay밀리초 후에 func을 규칙적으로, 또는 한번 실행하도록 해준다.
• setInterval·setTimeout을 호출하고 반환받은 값을 clearInterval·clearTimeout에 넘겨주면 스케줄링을 취소할 수 있다.
• 중첩 setTimeout을 사용하면 setInterval을 사용한 것보다 유연하게 코드를 작성할 수 있습니다. 여기에 더하여 지연 간격 보장이라는 장점도 있다.
• 대기 시간이 0인 setTimeout(setTimeout(func, 0) 혹은 setTimeout(func))을 사용하면 ‘현재 스크립트의 실행이 완료된 후 가능한 한 빠르게’ 원하는 함수를 호출할 수 있다.
• 지연 없이 중첩 setTimeout을 5회 이상 호출하거나 지연 없는 setInterval에서 호출이 5회 이상 이뤄지면, 4밀리초 이상의 지연 간격이 강제로 더해진다. 이는 브라우저에만 적용되는 사항이며, 하위 호환성을 위해 유지되고 있다.