JavaScript 콜백함수

콜백함수 : 다른 함수에 인수로 넘겨지는 함수

콜백함수는 하나의 함수가 실행되고 두 번째 함수를 실행하는 함수입니다.

function func() {
    document.write("함수가 실행되었습니다.2")
}

function callback(str) {
    document.write("함수가 실행되었습니다.1")
    str();
}

callback(func);

결과보기

콜백함수 : 반복문

콜백함수를 반복문을 사용해 반복하는 방법입니다.

function func(index) {
    document.write("함수가 실행되었습니다." + index);
}

function callback(num) {
    for (let i = 1; i <= 10; i++) {
        num(i);
    }
}

callback(func);

결과보기

콜백함수 : 동기/비동기

콜백함수의 동기/비동기 입니다. 여기서 동기는 동시에 실행하는 것을 말합니다.

// function funcA() {
    //     document.write("funcA가 실행되었습니다.");
    // }
    // function funcB() {
    //     document.write("funcB가 실행되었습니다.");
    // }
    // funcA();
    // funcB();

    // a
    // b

    // function funcA() {
    //     setTimeout(() => {
    //         console.log("funcA가 실행되었습니다.");
    //     }, 1000);
    // }
    // function funcB() {
    //     console.log("funcB가 실행되었습니다.");
    // }
    // funcA();
    // funcB();

    // b
    // a

    // function funcA(callback) {
    //     setTimeout(() => {
    //         console.log("funcA가 실행되었습니다.");
    //         callback();
    //     }, 1000);
    // }
    // function funcB() {
    //     console.log("funcB가 실행되었습니다.");
    // }
    // funcA(function () {
    //     funcB();
    // });

    // a
    // b

    function funcA(callback) {
        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가 실행되었습니다.");
        }, 1000);
    }
    funcA(function () {
        funcB(function () {
            funcC(function () {
                funcD();
            });
        });
    });

결과보기

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