setTimeout() && setInterval() 자바스크립트

setTimeout(func, millisec)

setTimeout()은 어디선가 그리고 아무래도 익숙한 느낌이다. 뭔가 시간과 관련된 함수일 것 같은 그런 느낌. 그리고 그 느낌이 맞다. 원하는 시간을 설정하면 그 시간이 지난 후 함수를 실행하게 된다.

포인트

setTimeout() 과 setInterval() 은 비동기적으로 작동하는 함수이다.

자바스크립트는 동기적으로, 즉, 스크립트를 순차적으로 읽으며 실행된다.

이 말은 윗라인의 실행이 끝나기 전까지는 아래라인은 실행할 엄두도 내지 못한다는 것이다. 

예를 들어보자.

console.log('start working');
console.log('still working');
console.log('end working');
 
// "start working"
// "still working"
// "end working"

크롬 브라우저에서 콘솔을 열어서 위 코드를 복붙하고 엔터를 땅! 치면 우리는 예상했던대로 일을 시작하고, 일하는 중이고, 일을 끝낸다는 아주 당연한 결과를 가지고 온다.

그런데 갑자기 팀장님이 일을 계속 무자비하게 막 준다. 그러면 당연히 퇴근이 늦어질 것이다. 그래서 setTimeout()이라는 알바를 고용해서 일을 맡겨봤다.

console.log('start working');
console.log('still working');
 
setTimeout(function() {
    console.log('extra working');
  }, 1000);
 
console.log('end working');
 
 
// "start working"
// "still working"
//      ??
// "end working"

나는 퇴근을 할 수 있을까?

포인트에서 언급했듯이 이 알바생은 훌륭하게도 비동기적으로 일을 한다. 내가 알바생에게 일을 맡기면 자기가 일하기 편한대로 가서 지시한 시간까지 일을 처리한다. 나는 내 일이 끝나면 퇴근을 하면되고 알바생은 일을 마치고 퇴근을 한다.

결과는!?

// "start working"
// "still working"
// "end working"
 
...1000 ms later
 
// "extra working"

setTimeout() 과 동일한 방식으로 작동하는 함수로 다른점은 setTimeout() 은 한번만 실행하지만 이 친구는 주어진 시간만큼을 간격으로 반복적으로 func 함수를 실행 시켜준다.

setInterval(function() {
    console.log('hello');
  }, 1000)

실행 횟수의 차이가 있다는 것만 알아두면 될것 같다.

 

한가지 팁!

setInterval() 을 멈추고 싶다면 clearInterval() 을 사용하면 멈춰줄 수 있다.

 

setInterval() 을 멈추는 방법

var intervalFunction = setInterval(function() {
                           console.log('hello');
                         }, 1000);
 
clearInterval(intervalFunction);

 

자, 그럼 Interval Clear 하러 가볼까?