[코드스테이츠 TIL] 비동기호출 Asynchronous Call & Callback 함수

[ Callback ]

 

콜백함수 : 다른 함수의 전달인자로 넘겨주는 함수

파라미터를 넘겨받는 함수는 콜백함수를 필요에 따라 즉시(synchronously) 실행할 수도 있고,

아니면 나중에(asynchronously) 실행할 수도 있다.

 

 

1. callback in action : 반복 실행하는 함수 iterator

[1,2,3].map(funciton(el, index){
  return el * el;
});

2. callback in action : 이벤트에 따른 함수 event handler

document.querySelector('#btn').addEventListener('click', function(el) {
  console.log('button clicked');
});

 

※ 콜백함수는 함수 실행을 연결하는 것이 아니라 함수 자체를 연결하는 것이다.

 

[ Asynchronous Call ]

 

 

 

setTimeout(callback, millisecond) : 일정 시간 후에 함수를 실행

- arguments: 실행할 callback 함수, callback 함수 실행 전 기다려야 할 시간 (밀리초)

- return value: 임의의 타이머 ID

setTimeout(function() { console.log('1초 후 실행');
}, 1000);
// 123

 

setInterval(callback, millisecond) : 일정 시간의 간격을 가지고 함수를 반복적으로 실행

- arguments: 실행할 callback 함수, 반복적으로 함수를 실행시키기 위한 시간 간격 (밀리초)

- return value: 임의의 타이머 ID

setInterval(function() { console.log('1초마다 실행');
}, 1000);
// 345

 

clearInterval(timerId) : 반복 실행중인 타이머를 종료

- arguments: 타이머 ID

- return value: 없음

var timer = setInterval(function() { console.log('1초마다 실행');
}, 1000);

clearInterval(timer);
// 더 이상 반복 실행되지 않음