setTimeout, setInterval

자바스크립트의 내장 함수가 아닌 브라우저에서 제공하는 함수이다.

##setTimeout

문법

window.setTimeout(callback, time)
setTimeout(callback, time)

2번째 인자값인 time 즉 밀리세컨드가 충족 되었을 때
딱 한번만 실행한다.

ex)

//1.
window.setTimeout(callback, 1000)

//2.
window.setInterval(callback, 1000)

1번 문장은 callback함수를 1초 후에 1번 실행하는 구문이다.
2번 문장은 callback함수를 1초마다 1번씩 반복 실행하는 구문이다.

하지만 생각했던데로 실행이 되지 않은 경우가 매우 많다.
예시)

console.log(1)
setTimeout (function (){
    console.log(2)
}, 1000)
console.log(3)

1을 출력하고 1초있다가 2를 출력한 후 3을 출력하고 싶었다.
내 생각대로라면 1,(1초후)2,3이 출력 값이어야 했다.
하지만 실제 출력 값은 1,3,2가 출력 되는 것이었다.
이는 자바스크립트의 특징 때문인데, 한번 알아보자.

JavaScript 특징

1. 싱글 스레드

자바스크립트는 기본적으로 싱글 스레드이다. 이게 무슨 뜻이냐면
작업을 하는데 있어서 하나씩만 처리가 가능다는 것이다.
( 콜스택이 쌓여서 하나씩만 처리가 진행된다. 후입선출방식 )

2. 백그라운드, 테스트 큐

브라우저는 콜스택 외에도 백그라운드라는 메모리 공간이 있다.
setTimeout()메서드는 브라우저가 처리할 코드락 ㅗ판한하고 해당 코드의 처리를 백그라운드로 넘기게 된다.

백그라운드로 넘어간 코드 중에서 익명함수에 해당하는 부분은 설정한 지연시간이 지나면 task que라는 공간으로 이동되어있다가 콜스택이 다 실행되어 비어지게 되면 콜스택으로 이동시켜서 실행한다. ( 이를 이벤트 루프라고 한다 )
따라서 setTimeout()의 익명함수는 콜스택에 담기는 것이아닌 백그라운드를 걸처 태스크 큐에 있다가 콜스택이 끝난 후에 실행이 되기 때문에
1 > 3 > 2 순으로 출력이 이루어진다.

이벤트 루프
이벤트 발생시 호출되는 콜백함수들을 태스트 큐에 전달하고 태스트 큐에 담겨있는 콜백함수들은 콜스택으로 넘기는 과정.

콜스택과 백그라운드는 모두 코드를 해석하는 공간이지만 (일종의 멀티 스레드)
콜스택은 '동기', 백그라운드는 '비동기' 방식으로 코드가 처리된다.

동기 & 비동기
동기 : 진행중인 작업이 완전히 끝나야만 다음 작업 진행
비동기 : 선행 작업 진행 중에도 다른 작업 병행 가능.
(setTimeout은 비동기 코드. 그러므로 백그라운드로 넘어간 지연코드들은 동시에 시간이 돌아간다.)
비동기 코드를 동기 형태로 짜 맞추는 것(순서 맞추기)은 쉽지 않다. (코드가 백그라운드로 넘어가는 순간 사용자가 컨트롤할 수 없기 때문. 사용자가 다룰 수 있는 공간은 콜스택 뿐)