콜백 함수

콜백 함수

다른 함수의 인자로써 넘겨진 후 특정 이벤트에 의해 호출되는 함수입니다.
(첫번째가 다 끝난 후 2번째가 실행되도록 하는 함수 로딩 소스가 다 끝나고 메인 소스가 나오도록 하는 그런 기능) : 첫번째 함수가 실행 -> 두번째 함수가 실행

---

기본 형태

콜백 함수는 그 자체로 특별한 선언이나 문법적 특징을 가지고 있진 않지만, 특정 이벤트가 발생할 때 호출할 수 있어 다양하게 많이 사용됩니다.

기본 형태
function func();
fuction callback(str){
　str();
}
callback(func);

{
    function func(){
        document.write("함수가 실행되었습니다.1");
    }
    function callback(str){     //인자값을 마치 함수인거처럼 실행문으로 사용
        document.write("함수가 실행되었습니다.2");
        str();
    }
    callback(func);
}

결과보기

콜백 함수 : 반복문

콜백 함수는 함수 안에 반목문을 사용할 수 있습니다.

{
    function func(index){
        document.write("함수가 실행되었습니다." + index);
    }
    function callback(num){     
        for(let i=1; i<=10; i++){
            num(i);
        }
    }
    callback(func);
}

결과보기

콜백 함수 : 동기/비동기

HTML은 작성한 순서대로 진행되기 때문에 실행 순서를 바꾸기가 쉽지 않습니다. 콜백 함수는 비동기적 실행을 가능하게 해서 순서를 바꿀 수 있습니다.

동기적 실행 : 프로그램이 작성된 순서대로 실행
비동기적 실행 : 두개 이상의 함수가 순서대로가 아닌 방식으로 실행

{
    //일번적인 함수 방식
    function funcA(){
        document.write("funcA가 실행되었습니다.")
    }
    function funcB(){
        document.write("funcB가 실행되었습니다.")
    }
    funcA();
    funcB(


    //b다음 a실행
    function funcA(){       //B가 실행된 다음 A가 실행됨
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.")
        }, 1000);
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.")
    }
    funcA();
    funcB(


    //a다음 b실행
    function funcA(callback){       //A가 실행된 다음 B가 실행됨
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.")
            callback();
        }, 1000);
    }
    function funcB(){
        console.log("funcB가 실행되었습니다.")
    }
    funcA(function(){
        funcB();
    });


    //a다음 b다음 c가 실행
    function funcA(callback){       //A가 실행된 다음 B가 실행됨
        setTimeout(() => {
            console.log("funcA가 실행되었습니다.")
            callback();
        }, 1000);
    }
    function funcB(callback){
        setTimeout(() => {
            console.log("funcB가 실행되었습니다.")
            callback();
        }, 1000);
    }
    function funcC(callback){
        setTimeout(() => {
            console.log("funcC가 실행되었습니다.")
            callback();
        }, 1000);
    }
    function funcD(){
        setTimeout(() => {
            console.log("funcD가 실행되었습니다.")
            // callback();
        }, 1000);
    }
    funcA(function(){
        funcB(function(){
            funcC(function(){
                funcD();
            });
        });
    });
}

결과보기

a다음 b다음 c가 실행되는 결과
//콘솔로그로 확인(1초씩 지연되서 차례대로 실행됨)

funcA가 실행되었습니다.
funcB가 실행되었습니다.
funcC가 실행되었습니다.
funcD가 실행되었습니다.