Java Script는 동기식 언어이다.
자바스크립트는 단을 스레드 프로그래밍 언어로 단일 호출 스택이 있어 한 번에 하나의 일을 처리할 수 있다.
하나의 호출 스택만 있기 때문에 하나의 함수를 처리하는 데 오랜 시간이 걸린다면 함수에 지장을 줄 수 있다.
예시를 들어 웹 페이지를 사용자에게 보여줄 때 해당 웹 페이지에 있는 모든 데이터를 받고 나서 화면이 보여진다고 가정을 할 때, 그 시간이 오래 걸릴 수가 있으며, 사용자 입장에서 웹 페이지를 보는 데 문제가 생길 수가 있다.
데이터를 받는 과정에 사용자는 다른 행동을 취할 수 있도록 하는 것이 더욱 효과적이고 사용자 입장에서 불편함을 줄일 수 있다.
call back
이름 그대로 뒤에 호출되는 함수를 뜻 한다.
callback 함수를 사용하는 이유는, 자바스트립트에서 비동기적 프로그래밍을 할 수 있다.
코드를 통해 명시적으로 호출 하는 것이 아닌, 함수를 등록하기만 하고 어떤 이벤트가 발생 또는 특정 시점에
도달 했을 때 시스템에서 호출하는 함수이다. 호출 방식에 의한 구분이다.
일반적으로 다른 함수에 넘기거나 객체의 프로퍼티로 사용한다.
비동기 프로그래밍을 하기 위해서는, 비동기적으로 콜백함수를 호출하는 함수에게 비동기적으로 호출되기를
원하는 코드를 콜백함수에 담아서 전달한다.
비동기 프로그래밍을 사용하는 경우
1. 이벤트 처리
화면에서 발생하는 이벤트는 예측불허이다.
특정 이벤트가 발생 했을 때, 호출을 원하는 내용을 callback 함수에게 전달을 한다.
2. 응답 처리 시간
서버에게 요청을 보냈을 때, 그 요청에 대한 응답이 언제 오는 지 정확하게 알 수 없기 때문에
서버에 대한 응답 처리는 비동기적으로 처리를 해야 효율적이다.
3. 의도적인 시간 지연
서버의 응답을 기다리기 위해 하나의 스레드를 사용하게 된다면,
사용자는 멈춰져 있는 화면을 계속 보게 된다.
스레드 블록킹을 발생시키는 것은 비동기 프로그래밍이 필수이다.
콜백 함수 사용의 예시로는 대표적으로 이벤트 핸들러 처리이다.
<button id="button1" onclick="button1_click();">button1</button>
<script>
function button1_click() {
alert("button1 click");
}
</script>
onclick의 button1_click 함수는 이벤트 핸들러에 전달 되고, 해당 버튼에 클릭 이벤트가 발생했을 때 이벤트 핸들러가 콜백함수를 호출한다.
setTimeout
setTimeout은 콜백함수의 실행을 지정된 초 만큼 지연하는 내장함수다.
시간(ms)을 간격으로 콜백함수를 반복 호출을 한다.
function newCallBack() {
console.log("비동기 호출")
}
console.log("호출 전 ");
setTimeout(newCallBack, 2 * 1000); // 2초 뒤 callback 호출
console.log("호출 이후");
호출 전
호출 이후
비동기 호출2초 뒤에 newCallback 함수가 호출이 된다.
동기적 프로그래밍에서 3초 뒤에 newCallBack을 호출시키면, 2초를 하나뿐인 메인스레드가 계산을 해야 하는데,
그 때 동안 프로그래밍이 멈추게 되는 문제가 발생한다. setTimeout는 메인스레드가 할 일을 자바스크립트 API에게
위임을 시켜, 메인스레드의 멈춤을 방지 해 준다.
setInterval, clearInterval
setInterval 또한 setTimeout과 같이 callback 함수를 비동기적으로 호출이 가능하게 해준다.
둘의 차이점은 지정된 시간을 기준으로 반복적으로 콜백을 호출해준다.
setInterval은 return 값으로 고유하게 interval을 식별하는 interval ID를 갖는다.
clearInterval()로 고유 interval ID를 제거 해 반복 호출을 중단 시킬 수 있다.
// setInterval()함수의 반환값을 변수에 할당하여 반복 시작
let interval = setInterval(callback, 1000);
// clearInterval(변수)로 반복 중단
function callback() {
console.log('a');
}
// clearInterval(변수)로 반복 호출 해제
clearInterval(interval);
// setInterval()함수의 반환값을 변수에 재할당하여 시작
interval = setInterval(callback, 1000);함수를 반복호출하다가 잠시 중단하고 다시 시작 하는 예제이다.
setInterval 함수의 반환값을 변수에 두고, clearInterval을 호출하여 반복 중단
다시 setInterval로 재 시작을 한다.