콜백이란?
자바스크립트는 객체지향 언어이다. 콜스택에 태스크를 받아 수행을 동기적(순서대로)으로 수행하지만 하나의 태스크가 수행하는데 시간이 오래 걸리면 다음에 수행해야할 태스크들이 의미없이 콜스택에 수행중인 태스크를 기다려야하는 상황이 나온다. 혹은 비동기식(동시에 여러 태스크를 수행)으로 동작해야할 때 콜백함수를 사용한다.
콜백은 다른 함수가 실행을 끝낸 뒤에 태스크큐에 저장되어있다가 메모리에 태스크가 전부 수행되고 나서
결과를 가져온다.
function first(){
console.log(1);
}
function second(){
console.log(2);
}
first();
second();
//1
//2first()를 먼저 호출하고 second()를 나중에 호출했기 때문에 1,2가 출력된다. 하지만 fisrt()를 호출하고 실행되는데 시간이 오래걸리게 되면 second를 first가 수행될 때까지 기다리게되고 그만큼 delay가 생긴다. 이러한 불필요한 delay를 줄이기 위해 콜백함수를 사용한다.
seTtimeout은 태스크 스케쥴링에 사용되는 대표적인 함수이다.
function first(){
setTimeout( function(){
console.log(1);
}, 500 );
}
function second(){
console.log(2);
}
first();
second();
//2
//1first()를 먼저 호출했지만 second()값이 먼저 출력되었다. first()는 500ms의 딜레이를 주고 실행되어 태스크큐에 저장되었다가 main이 전부 실행되고나서 출력된다.
setTimeout,setInterval,clearTimeout
두 함수 전부 일정시간이 지나고 실행되는 함수이다.
▪️ setTimeout을 이용해 일정 시간이 지난 후에 함수를 실행하는 방법
▪️ setInterval을 이용해 일정 시간 간격을 두고 함수를 실행하는 방법
▪️ clearTimeout을 이용해 스케쥴링된 함수를 취소하는 방법
setTimeout
setTimeout("alert('안녕하세요.')", 1000);
위 처럼 함수를 만들게되면 alert를 자동으로 함수로 만들어 1초뒤 alert를 출력하게 되지만 좋은 방법은 아니다.
setTimeout(() => alert('안녕하세요.'), 1000);
함수안에 함수를 만들어 출력하는 방법이 더 좋다.
function sayHi() {
console.log('안녕하세요.');
}
setTimeout(sayHi, 1000);seTtimeout안에 함수를 넣을 땐 ()를 빼고 함수를 넣어야한다. ()는 값을 반환한다는 뜻이라 ()를 붙이게 되면 undefine이 출력된다.
setInterval
setInterval(() => console.log('Hi!'), 2000);
setInterval(실행할 함수, 반복시간) 문법에 맞춰 함수를 쓰면 된다. 그러면 위 함수는 Hi!라는 문구가 콘솔창에 2초마다 반복해서 뜨게된다. 특정 함수를 무한히 반복해야할 때 비동기식으로 사용해야할 경우 사용한다.
clearTimeout
let timerId = setInterval(() => console.log('Hi!'), 2000);
setTimeout(() => { clearInterval(timerId); console.log('정지'); }, 5000);setInterval()함수는 변수에 할당하기만해도 실행이된다. 그래서 2초동안 Hi!라는 문구가 반복되다가 5초뒤에 두번째 clearInterval로 인해 반복되는 timerId가 지워지고 정지를 출력하게된다.
clearInterval(변수)문법으로 setInterval를 변수로 할당하고 반복되는 함수를 지운다.
