호출 스케줄링

일정 시간이 경과된 후 함수를 호출하는 방식.setTimeout, setinterval을 사용한다.
빌트인 객체는 아님(Node.js, 브라우저).
JS는 싱글스레드기에 이를 비동기방식으로 처리한다. 비동기라는 말은 42장에서 살펴본다.

타이머 함수

• setTimeout(callback, delay, param1, param2, ...) : delay(ms)시간 이후 실행할 callback함수를 받는다. 이때 param1부터 callback의 인수로 들어간다. 또한 특정 id값을 반환하는데 이를 이용하여 예약된 함수를 clearTimeout으로 취소할 수도 있다.

setTimeout((name) => console.log(name), 1000, 'kim')//'kim'

• setInterval(callback, delay, param1, param2, ...) : delay(ms)만큼 지날때마다 콜백을 반복하여 실행. 나머지는 위와 동일.

디바운스와 스로틀

이를 이용하여 디바운스, 스로틀을 구현할 수 있다.
클로저를 사용한다

const debounce = (callback, delay) => {
	let timerId;
	return event => {
    	if(timerId) clearTimeout(timerId);
      	timerId = setTimeout(callback, delay, event);
    }
}

const throttle = (callback, delay) => {
	let timerId;
	return event => {
    	if(timerId) return;
      	timerId = setTimeout(() => {
        	callback(event);
          	timerId = null;
        }, delay, event);
    }
}

---

비동기 프로그래밍

비동기와 동기에 대해서는 여기를보자
JS는 싱글스레드(단일 실행 컨텍스트)다. 따라서 처리하는데 시간이 걸리는 태스크를 실행한다면 블로킹이 발생한다.
이를 동기처리라고함. 하나씩 처리하면 순서가 보장되지만 태스크가 종료될때까지 아예 멈춰버림.
이를 방지하기위하여 JS는 비동기방식으로 시간이 걸리는 태스크(위에서 설명한 호출 스케쥴링 등)을 처리함.
이는 이벤트 루프 부분에서 자세히 설명하였다

그림으로 보면 이해가 잘 된다

출처 : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif