JavaScript의 비동기 작업 및 반환 값: 수수께끼 해결

JavaScript에서는 네트워크 요청이나 이벤트 처리와 같은 비동기 작업이 자주 발생합니다. 결과를 동기식으로 반환하려고 할 때 문제가 발생합니다. 그러한 상황 중 하나는 다음 jQuery 함수로 예시됩니다:

function trackPage() {
    var elqTracker = new jQuery.elq(459);
    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function(guid) {
                alert(guid);
                var returnValue = guid; // Attempt to assign the GUID to a variable
            });
        }
    });
    return returnValue; // Return the assigned variable
}

이 시나리오의 목표는 GUID 값을 비동기적으로 가져와 호출자에게 반환하는 것입니다. 그러나 returnValue 변수는 정의되지 않은 상태로 유지되므로 동기 반환이 효과적이지 않습니다.

비동기 작업의 특성 이해

문제의 핵심은 비동기 작업의 비동기 특성에 있습니다. getGUID 작업. 비동기 작업은 기본 스레드를 차단하지 않고 실행을 시작하고 계속합니다. 이는 trackPage의 return 문에 도달할 때까지 getGUID 호출이 아직 완료되지 않았으며 그 결과를 사용할 수 없음을 의미합니다.

콜백 함수 및 약속을 사용하는 솔루션

이 문제를 해결하는 두 가지 주요 접근 방식은 다음과 같습니다.

1. 콜백 함수: GUID를 사용할 수 있게 되면 호출되는 trackPage에 매개변수로 콜백 함수를 도입합니다. 이 접근 방식은 널리 사용되지만 제어 흐름을 신중하게 관리해야 하며 콜백 지옥으로 이어질 수 있습니다.
2. jQuery Deferrals: jQuery의 Deferred 객체를 활용하여 비동기 작업과 최종 결과를 나타냅니다. 결과가 제공되면 호출자가 콜백을 첨부할 수 있는 trackPage에서 "약속"이 반환될 수 있습니다.

코드 리팩터링:

지연된 항목 사용 객체 솔루션의 경우 코드는 다음과 같이 리팩토링될 수 있습니다.

function trackPage() {
    var elqTracker = new jQuery.elq(459);
    var dfd = $.Deferred();

    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function(guid) {
                dfd.resolve(guid); // Resolve the Deferred object with the GUID
            });
        }
    });

    return dfd.promise(); // Return a promise that represents the result
}

// Example usage:
trackPage().done(function(guid) {
    // Guid is now available as the parameter to the done callback
    alert("Got GUID: "   guid);
});

이 리팩터링된 코드는 Deferred 객체를 활용하여 비동기 작업을 나타내고 결과가 사용 가능해지면 결과를 검색하기 위해 콜백을 연결하는 유연성을 허용합니다.