[javascript] 콜백함수

hellow_coding·2023년 7월 18일

콜백함수❓

콜백 함수는 다른 함수에게 인자로 전달되어 나중에 호출되는 함수를 의미합니다. 콜백 함수는 비동기적인 작업, 이벤트 처리, 타이머 등 다양한 상황에서 사용됩니다.

function callback() {
  // 콜백 함수의 내용
}

someFunction(callback); // 콜백 함수를 인자로 전달
someFunction(callback()); // xx 

1. 타이머

setTimeout(function() {
  console.log('타이머가 만료되었습니다.');
}, 1000);

setTimeout 함수는 지정된 시간이 경과한 후 콜백 함수를 호출합니다.

2. 이벤트 핸들링

button.addEventListener('click', function() {
  console.log('버튼이 클릭되었습니다.');
});

addEventListener 함수는 버튼 클릭 이벤트가 발생했을 때 콜백 함수를 호출합니다.

3. 비동기 작업

ajax(url, function(response) {
  console.log('비동기 요청이 완료되었습니다.');
  console.log(response);
});

ajax 함수는 비동기적으로 서버에 데이터를 요청하고, 요청이 완료되면 콜백 함수를 호출하여 응답 데이터를 처리합니다.

콜백 함수는 함수의 인자로 전달되므로, 콜백 함수의 매개변수를 통해 결과 데이터나 이벤트 정보 등을 전달받을 수 있습니다. 이를 통해 비동기적인 작업의 완료 여부를 감지하거나 결과를 처리할 수 있습니다.


1. setTimeout: 일정 시간이 지난 후에 콜백 함수를 한 번 실행하는 타이머입니다.

setTimeout(function() {
  console.log('Hello, world!');
}, 2000);

2. setInterval: 일정한 시간 간격으로 콜백 함수를 반복해서 실행하는 타이머입니다.
clearInterval 함수를 사용하여 중지할 때까지 계속 반복됩니다.

let count = 0;
const intervalId = setInterval(function() {
  console.log(count);
  count++;
  if (count === 5) {
    clearInterval(intervalId);
  }
}, 1000);
profile
꿈많은 개발자

2개의 댓글

comment-user-thumbnail
2023년 7월 18일

유익한 글 잘 봤습니다, 감사합니다.

1개의 답글