콜백함수_js
2021. 12. 18. 10:30ㆍksmart_html_css_js/JavaScript
728x90
- 함수의 매개변수로 함수코드를 받고 매개변수로 받은 함수를 호출하는 방식
- 매개변수로 받은 함수를 실행하면서 인수값을 삽입하여 실행 할 경우, 인수로 삽입된 함수에서 매개변수로 값을 받을 수 있다.
- 비동기화 처리시 주로 사용된다.
//1. 함수 선언
var myFn=function(){
//3.매개변수는 함수를 받는다.
console.log(typeof fn);
if(typeof fn=='function'){
//4.인자값이 함수라면 실행이 가능하다.
//5.매개변수가 함수임으로 실행하면서 인수를 삽입 할 수 있다.
fn('한국스마트정보교육원');
//6.myFn 함수를 호출하면서 삽입된 인수 함수에서 인자를 받을 수 있다.
}
};
//2.함수 호출 시 인수 함수
myFn(function(str){//7.함수가 실행되면서 인자를 받을 수 있다.
console.log(str);
});
- 콜백 함수의 비동기화 테스트
setTimeout -> 인수에 삽입된 시간이 지난 후에 인수에 삽입된 함수 실행
1000 -> 1초

myFn(function(str) {//7.함수가 실행되면서 인자를 받을 수 있다.
console.log(str);
});
setTimeout(function(){
console.log('setTimeout 1초');
},1000);
console.log('종료');
- 비동기화 예제
var cnt=0;
setTimeout(function(){
cnt++;
},1000);
console.log('종료2',cnt);

- 예제2
var cnt=0;
setTimeout(function(){
cnt++;
},1000);
console.log('종료2',cnt);
var myNum=function(n){
console.log(n);
}
var cnt2=0;
setTimeout(function(){
myNum(++cnt2);
},1000);

- 동기화와 비동기화
반복문은 동기화 처리로 setTimeout 이벤트 등록시키면서 i 값은 10값 변환
setTimeout은 1초 후에 실행됨으로 i값 10으로 결과 반환(비동기화)
for (var i = 0; i < 10; i++) {
setTimeout(function() {
console.log(i,'setTimeout-for');
}, 1000);
}

서버에서 5초 후에 응답 했다는 가정
setTimeout(function(){
fn('한국스마트정보교육원','5초 후');
},5000);
728x90
'ksmart_html_css_js > JavaScript' 카테고리의 다른 글
크로저_js (0) | 2021.12.18 |
---|---|
함수 - 내부함수, 재귀호출_js (0) | 2021.12.18 |
함수_js (0) | 2021.12.18 |
Continue, Break, 중첩 반복문_js (0) | 2021.12.18 |
제어문-반복문(for)_js (0) | 2021.12.18 |