자바스크립트 콜백

콜백은 간단히 말해 나중에 호출할 함수이다. 콜백 함수도 일반적인 자바스크립트 함수일뿐입니다.

콜백 함수는 일반적으로 다른 함수에 넘기거나 객체의 프로퍼티로 사용합니다. 일반적으로 익명 함수로 사용하며 드물게는 배열에 넣어서 쓸 때도 있다.

    console.log("Before timeout: " + new Date());
    function f() {
        console.log("After timeout: " + new Date());
    }
    setTimeout(f, 6*1000); //1분
    console.log("I happen after setTimeout!");
    console.log("Me too!");

초보자 입장에서 기대하는 순서와는 다르게 나올것입니다. 기대대로 된다면 좋겠지만, 그것은 비동기적이지 않습니다.

비동기적 실행의 가장 큰 목적, 가장 중요한 요점은 어떤 것도 차단하지 않는다는 것입니다. 자바스크립트는 싱글 스레드를 사용하므로, 우리가 컴퓨터에 60초 동안 대기한 후 코드를 실행하라고 지시한다면, 그리고 그 실행이 동기적으로 이루어진다면 꽤 골치 아픈일이 벌어집니다. 프로그램이 멈추고, 사용자 입력을 받아들이지 않고, 화면도 업데이트하지 않을 겁니다. 비동기적 테크닉은 프로그램이 이런 식으로 멈추는 일을 막아줍니다.

 

    var start = new Date();
    var i=0;
    var intervalId = setInterval(function() {
        var now = new Date();
        if(now.getMinutes() !== start.getMinutes() || ++i>10)
            return clearInterval(intervalId);
            console.log(i + "///" + now);
        }, 5*1000);

setImeout은 콜백 함수를 한 번만 실행하고 멈추지만, setInterval은 콜백을 정해진 주기마다 호출하며 clearInterval을 사용할 때까지 멈추지 않습니다. 위 예제를 보면 setInterval이 ID를 반환한다는 사실을 알 수 있습니다. 이 ID를 써서 실행을 멈출 수 있습니다. clearInterval은 setInterval이 반환하는 ID를 받아 타임아웃을 멈춥니다.

 

출처 - 러닝 자바스크립트