setTimeout(), clearTimeout()

1. setTimeout()

시간지연함수.

함수를 의도적으로 지연한 뒤 실행하고 싶을 때 사용한다.

setTimeout(function() {
	// Code
}, delay);

지연시간은 밀리세컨드 단위로 설정해야한다. (1000은 1초)

*delay는 실행전 대기 시간이지만 호출 시점이 정확히 몇초 후라는 것을 보장하지 않는다.

 

2. 작동원리 (delay 0)

그런데 지연시간에 0을 넣거나 아무것도 넣지않아도 setTimeout함수는 다른코드가 실행된 후 마지막에 실행된다.

 

브라우저가 자바스크립트를 실행할 때

Call Stack(LIFO)에 넣는데 setTimeOut은 Task Queue(FIFO)에 넣음.

Stack이 비워야 Queue에 있는걸 꺼내기 때문에 (아래 3번에서 설명)

지연시간으로 0초를 줘도 stack이 비워지기를 기다렸다가 실행된다.

 

3. 자바스크립트 개념

3-1. 콜스택(Call Stack)

자바스크립트 코드 실행 중, 함수가 호출될 경우 해당 함수는 실행 순서대로 콜 스택에 쌓이게(push)된다.
이후 함수의 실행이 완료되면 스택에서 제거(pop)된다.

 

3-2. 태스크 큐(Task Queue)

이벤트 핸들러, setTimeout 등의 함수들이 Call Stack으로 이동되기 전 보관되는 곳이다.

 

3-3. 이벤트 루프(Event Loop)

실행할 함수(콜백)들을 관리한다. 콜스택에 실행 중인 함수가 있는지 확인하고, CallStack이 비었다면 태스크 큐에 대기중인 함수들을 CallStack으로 이동시킨다.

 

*clearTimeout

setTimeout으로 예약된 함수를 취소하는 함수입니다.

// 타이머 ID를 저장할 변수
let timerId = setTimeout(function() {
  // 실행될 함수 내용
}, 2000);

// 예약된 함수 실행 취소
clearTimeout(timerId);