콜백 함수
이벤트 및 특정 시점으로 인해 후에 시작되는 함수
주로 비동기 방식이다.
후에 시작되는 함수는 매개변수로 데이터를 받을 수 있다.
<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>
기록하는 삶