콜백함수_js

2021. 12. 18. 10:30ksmart_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