자바스크립트 개발자가 알아야할 33가지 개념[#10. 스케쥴링 : setTimeout 과 setInterval]

개발을 하다보면, 함수를 당장 실행하지 않고 정확히 몇 초의 딜레이 후에 실행하고 싶을 때가 있을 것이다.

이것을 호출 스케쥴링하기(scheduling a call)라고 한다.

 

이것을 구현하기 위해 두가지 메소드가 존재한다.

 

• setTimeout : 일정 시간 간격 이후에 함수가 한번 실행된다.
• setInterval : 일정 시간 간격으로 함수가 주기적으로 실핼된다.

위의 두 메소드들은 자바스크립트 스펙의 일부가 아니다. 하지만 대부분의 환경은 내부적인 스케쥴러를 갖고 있다.

그리고 이러한 메소드들을 제공한다. 구체적으로는 node.JS와 모든 브라우저에서 제공된다.

 

 

setTimeout

let timerId = setTimeout(func() {}, [delay], [arg1], [arg2], ...);

 

파라미터

function() {}

실행을 위한 함수나 문자열이다. 주로, 함수를 받는다. 코드의 문자열도 넘겨질수 있지만 권장하지 않는다.

 

delay

함수가 몇 초후에 실행 될지 정한다. ms단위로 이루져 있다. 1000ms = 1초이다.

디폴트 값은 0이 들어있다.

 

arg1, arg2...

함수에 대한 인자(Arguments)들 이다.

 

 

 

clearTimeout으로 취소하기

setTimeout함수를 스케쥴링하고 취소하기 위해 clearTimeout함수를 이용해준다.

걀과로는 아무것도 일어나지 않는다.

 

 

setInerval

setInterval 메소드는 setTimeout과 같은 문법을 갖고 있다.

 

let timerId = setInterval(func() {}, [delay], [arg1], [arg2], ...);

모든 인자들은 같은 의미를 갖는다. 하지만 setTimeout과는 다르게 함수를 한번만 실행하는 것이 아니라 부여된 시간 간격 이후로 주기적으로 실행한다.

 

더 이상 호출하는 것을 중지하고 싶다면, clearInterval(timerId)를 호출해야한다.

 

 

이처럼 자바스크립트의 타이머를 사용하는 내장 함수인 setTimeout함수와 setInterval함수에 대해서 살펴봤다.

마지막으로 setTimeout함수와 setInterval함수를 사용한 후에는 반드시 clearTimeout함수와 clearInterval함수를 사용해서 타이머를 청소해주는 습관을 들여야한다. 특히, SPA(Single Page Application)을 개발할 때는 이 부분이 메모리 누수로 이어질 수 있기 때문에 각별히 조심하자.

 

 

 

 

---

참고 및 출처https://velog.io/@jakeseo_me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EA%B0%9C%EB%B0%9C%EC%9E%90%EB%9D%BC%EB%A9%B4-%EC%95%8C%EC%95%84%EC%95%BC-%ED%95%A0-33%EA%B0%80%EC%A7%80-%EA%B0%9C%EB%85%90-10-%EC%8A%A4%EC%BC%80%EC%A5%B4%EB%A7%81-setTimeout-%EA%B3%BC-setInterval-y6juukjsey