async 공부하기 전 setTimeout , setInterval 이해하기

얼마 만에 하는 공부이고 얼마 만에 적는 TIL인지 모르겠다.

끝도 나지 않는 코로나... 내 공부를 망치고서야 끝날건가. 두고보자. 씩-씩-

 

setTimeout, setInterval을 공부하는 이유

비동기 상황을 가장 쉽게 만들어 볼 수 있는 방법이 타이머 API를 이용하는 방법이라고 한다. 나는 아직 setTimeout이나 setInterval 등의 타이머 API를 사용하는 방법이 익숙하지 않다. 

이번부터는 공식 문서를 자.세.히 읽는 데에 익숙해지기 위해 가능한 공식문서의 순서에 따라 내용을 정리하고 틀을 따르려고 한다. 단, 내가 이해하기 쉽게 정리하고, 설명하는 말투로 적어보려고 한다.

공부 목표

1. setTimeout, setInterval의 사용법 알기

2. 두 가지의 차이점 알기

3. 화살표 함수로 표현하는 방법에 익숙해지기

 

참고 자료

MDN

---

setTimeout & setInterval

setTimeout : 타이머가 만료된 후 정해진 function이나 지정된 코드를 한 번 실행한다. 보통 재귀적 호출을 통해 작업을 반복한다. 

setInterval : 일정한 시간 간격으로 작업을 수행할 때 사용한다. ** 지정된 시간 간격보다 작업이 오래 걸릴 경우 문제가 발생한다.

 

syntax

문법은 동일하다.

 

< setTimeout() >

let timeoutID = scope.setTimeout(function, [delay, arg1, arg2 ...]);

< setInterval() >

let intervalID = scope.setInterval(function, [delay, arg1, arg2, ...])

 

첫 번째 parameter로 function을 받는데, (주의!! 함수를 실행하는 게 아니라 넘겨만 주어야 한다. 즉, myFunc() 가 아니라 myFunc!)

• setTimeout의 경우 timer가 만료된 후 함수를 한 번 실행한다.
• setInterval의 경우 일정 시간 간격을 두고 함수를 실행한다.

지정된 function에 필요한 인자들을 뒤에 적어줄 수도 있다.

function 대신  parameter로 string을 포함할 수도 있지만 보안상의 이유로 권장되진 않는다고 한다.

delay되는 시간은 ms(밀리세컨) 단위인데 이 매개변수를 생략할 경우 0으로 간주되어 즉시 실행한다. 

리턴되는 값은 각각 timeoutID / intervalID로 숫자이며, 이는 setTimeout() / intervalID() 를 호출했을 때 만들어진, 타이머를 식별할 수 있는 0이 아닌 값이다.

이 리턴값은 타이머를 취소시키기 위해 clearTimeout() / clearInterval() 에 전달할 수도 있다.

 

 

Usage

setTimeout() 

function sayHi(){
  alert ('안녕');
}

setTimeout(sayHi, 1000);

// 1초 후에 sayHi()가 호출되어 '안녕'이라는 메세지를 띄운다.

function sayHi(name, message){
  alert(name + ' 님 ' + message );
}

setTimeout(sayHi, 1000, '선생님', '안녕하세요');

// setTimeout 함수에 인수를 전달해줄 수도 있다.

 

 * function 대신 string을 넣어줄 경우

setTimeout('alert('안녕')', 1000)

// function 대신에 string을 포함한 코드를 넣을 수도 있지만 권장되진 않는다.

 

* claerTimeout()

let timerID = setTimeout( ... ); // setTimeout()을 호출하면 timerID가 반환되는데
clearTimeout(timerID) // 스케쥴링을 취소할 때 clearTimeout에 인자로 전달할 수 있다.

alert(timerID) // 스케쥴링을 취소한 후 timerID를 호출하면 아무 일도 일어나지 않는다. 
			// 단, 취소 후에도 timerID는 null 값이 되지 않고 이전의 값을 유지한다.

 

 

---