[Javascript] 콜백함수

콜백 함수

이벤트 및 특정 시점으로 인해 후에 시작되는 함수
주로 비동기 방식이다.
후에 시작되는 함수는 매개변수로 데이터를 받을 수 있다.

---

	<script type="text/javascript">
		function myFn(t, f){
			console.log(t, f);
			f({target : '#btn', number : 10});
		}
		myFn('click', function(e){
			console.log(e);
		});
		
		var myObj = {
				myFn : function(t, f){
					console.log(t, f);
					//이벤트 발동 
					setTimeout(function(){
						//사용자가 이벤트 행위를 실행했을 경우 그 정보를 객체에 담는다. 
						var info = {target : '#btn', number : 10};
						//이벤트 행위를 했을 경우, 등록함수를 실행하면서 실행행위에 대한 정보를 인수에 넣는다. 
						f(info);			
					}, 3000);
				}
			}
		//등록 함수가 3초후에 실행이 된다. 
		myObj.myFn('click', function(e){
			console.log(e);
		})
	</script>

콜백 데이터 target속성을 활용한 동적바인딩

---

<ul id="myUl">
		<li>
			<button type="button" class="add">추가</button>
			<button type="button" class="del">삭제</button>
		</li>
	</ul>
	<script type="text/javascript">
		var myUl = document.querySelector('#myUl');
		myUl.addEventListener('click', function(e){
			console.log(e.target, '클릭한 대상');
			//클릭한 대상이 add라는 클래스를 가지고있다면
			if(e.target.classList.contains('add')){
				var li = e.target.parentElement.cloneNode(true);
				this.appendChild(li);
			}
			//클릭한 대상이 del이라는 클래스를 가지고있다면
			if(e.target.classList.contains('del')){
				e.target.parentElement.remove(); 
			}
		})
	</script>

콜백함수 예제 (1)

---

<script type="text/javascript">
		//코드는 위에서 아래로 실행
		function fn01(){
			return 1;
		}	
		var result = fn01();
		console.log(result);
		
		//반복문 종료후 아래코드 실행
		for(var i=0; i< 10; i++){
			console.log('반복문')
		}
		console.log('반복 종료');
		
		/*
			setTimeout -> 내장함수
			- 1번째 인수 함수
			- 2번째 인수 숫자 (시간)
			- 2번째 인수에 해당되는 시간 후에 1번째 인수 함수 실행
			* 1000-> 1초
			*/
		
		setTimeout(function(){//함수를 저장해 놓았다가 특정 시점 발생시 함수 실행
			console.log('3초후실행');
		},3000)
		console.log('코드실행 종료');
			
		/*
		콘솔 출력 결과
		- 코드 실행 종료 //동기화 -> 순차적 코드 실행
		- 3초후 실행 // 트겅 시점 이후에 실행
		*/
		var cnt=0
		for(var i=0; i<10; i++){
			console.log('반복 실행',i);
			setTimeout(function(){
				cnt++;
				//실행 시점이 틀린 데이터는 순차적으로 실행되는 코드에서 데이터를 갱신할 수 없음
				console.log(cnt,'setTimeout');
				//실행 시점이 틀린 데이터는 다른 함수로 데이터 전달 해서 주로 사용된다.
				callFn(cnt);
			},1000);
		}
		console.log(cnt,'cnt');
		
		function callFn(n){
			console.log(n,'후 데이터 받기');
		}
	</script> 

콜백함수 예제 (2)

---

	<script type="text/javascript">
		var userName ='';
		function callFn01(fn){
			/*
			사용자가 5초 후에 실행 했다는 가정
			혹은 서버에서 5초후에 응답을 했다는 가정
			5 초후 응답 데이터를 '홍길동' 이라는 문자열을 전달
		    */
			setTimout(function(){
				userName ='홍길동'; //userName에 5초후에 저장은 가능
				fn('홍길동');
			},5000)
		}
		/*
			비동기화로 작동되는 함수는 데이터 전달을 콜백 함수로 함
		*/
		
		callFn01(function(name){// 5초후에 반응할 함수를 전달
			console.log(name,'콜백데이터');
		})
		callFn01(userName,'순차적 실행');
	</script>

콜백함수 예제 (3)

---

<script type="text/javascript">
	
		/*
			인자로 함수를 받는 이유는?
			함수 내부에서 실행 시점이 언제인지를 모르기 때문에
			함수에 코드를 저장했다가
			시점 발동시 해당 인자로 들어온 함수를 실행 
		*/
		
		function myFn(fn){
			fn()
		}
		myFn(function(){
			console.log('myFn');
		})
	
		var userName ='';
		function callFn01(fn){
			/*
			사용자가 5초 후에 실행 했다는 가정
			혹은 서버에서 5초후에 응답을 했다는 가정
			5 초후 응답 데이터를 '홍길동' 이라는 문자열을 전달
		    */
			setTimeout(function(){
				userName ='홍길동'; //userName에 5초후에 저장은 가능
				fn('홍길동');
			},5000);
		}
		/*
			비동기화로 작동되는 함수는 데이터 전달을 콜백 함수로 함
		*/
		
		callFn01(function(name){// 5초후에 반응할 함수를 전달
			console.log(name,'콜백데이터');
		})
		console.log(userName,'순차적 실행');
		
		
		
		function call(fn){
			setTimeout(function(){
				fn('김길동');
			},5000)
		}
		call(function(name){
			console.log(name,'입니다.');
		})
	</script>

콜백함수 실습

---

<h1>콜백 함수 실습</h1>
	실습. 
	
	<script type="text/javascript">
		function windowPrint(fn,str){
			var b =2000;
			setTimeout(function(){
				document.write(str);
				fn(b);
			},b);
		}
		windowPrint(function(a){
			console.log(a,'초 후에 쓰여졌다.')
		},'호출만하자')
	</script>
	
	<h2>실습</h2>
	실습. 아래의 myFn 함수가 실행되면서 인수에 들어간 함수가 바로 실행이 되면서<br>
	msg라는 매개변수에서 '안녕하세요' 라는 문자열을 받을수 있도록 코드를 완성하여라.
	<script type="text/javascript">
		function myFn(fn){
			fn('안녕하세요');
		}
		myFn(function(msg){
			console.log(msg);
		})
	</script>
	
	<h2>실습</h2>
	<script type="text/javascript">
		function numPrint(fn,p){
			setTimeout(function(){
				fn(p);
			},3000);
		};
		numPrint(function(n){
			console.log(n,'3초 후에 100')
		},100);
	</script>
	<h2>실습</h2>
	실습. 아래의 코드가 에러가 발생되지 않고 원하는 결과값이 나올 수 있도록 <br>
	함수 선언부를 완성하여라
	<script type="text/javascript">
		function myArray(sum,arr){
			var asum=0;
			
			setTimeout(function(){
				for(var i=0; i<arr.length; i++){
					asum+=arr[i];
				}
				sum(asum);
			},1000)
		};
	
	
		myArray(function(sum){
			console.log(sum);
		},[10,20,30,40,50]);
	</script>