使用jQuery的JavaScript异步返回值/赋值[重复]答案

【问题标题】：JavaScript asynchronous return value / assignment with jQuery [duplicate]使用jQuery的JavaScript异步返回值/赋值[重复]
【发布时间】：2011-12-08 10:41:03
【问题描述】：

我有以下 jQuery 函数。我正在尝试返回alert(); 中显示的 GUID 值，警报工作正常并且值已填充，但我似乎无法将其分配给变量并返回其值。

最终我需要访问其他函数中的 GUID 值等。我尝试过的所有内容都只显示为undefined。

我想做这样的事情：

function trackPage(){
    var elqTracker = new jQuery.elq(459);
    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function(guid) {
                alert(guid);
                var returnValue = guid;
            });
        }
    });
    return returnValue;
}

var someGuid = trackPage();

【问题讨论】：

getGUID 是异步调用吗？
不确定..这是来自其他 JS 的插件调用（不是我可以修改的调用）..我可以提醒该值..甚至将其分配给一个新变量..我只是看起来在函数之外获取该值
在这种情况下听起来肯定是异步的。
这不仅仅是 sp 错误 - returnValuRRRRe?
对不起..这只是一个错字..已更正..（无关）

标签： javascript jquery asynchronous

【解决方案1】：

所以，这个问题已经被问了一百万次了，我相信每个人（包括我自己）tried this once。

这只是异步调用的本质，您不能将它们的结果用作return 值。这就是为什么他们让你传入一个获取调用结果的函数，他们也不能return 它！另请注意elqTracker.pageTrack() 函数调用立即返回，因此您的returnValue 只是undefined。

大多数人（参见 dfsq 的回答）通过引入回调函数作为参数来解决这个问题。这个方法已经试过了，而且是真的——但是 jQuery 有$.Deferred。这使您可以让自己的异步逻辑返回 promise，然后您可以将任意数量的回调附加到：

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

    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function( guid ) {
                dfd.resolve( guid );
            });
        }
    });

    return dfd.promise();
}

// example use:
trackPage().done(function( guid ) {
    alert( "Got GUID:" + guid );
});

现在注意到您的trackPage() 返回一个可以附加回调的对象吗？您也不必立即附加它们。

var pageHit = trackPage().done(function( guid ) {
    alert( "Page Hit GUID:" +guid );
});

$("button").click(function() {
    pageHit.done( function( guid ) {
        alert( "Clicked on Page GUID:" + guid );
    });
});

此外，jQuery AJAX 模块也总是返回 Promise，因此如果您自己创建逻辑返回 Promise，那么所有 AJAX 内容的接口应该非常相似。

附带说明：我想指出您的var returnValue 无论如何都在错误的“范围”内。它需要在trackPage 函数的外部范围内声明。即使有了这个修复，这个概念仍然不起作用。

【讨论】：

【解决方案2】：

由于您有异步调用，因此您尝试编写代码的方式将不起作用（因为尚未定义 trackCode 返回值中的return returnValue; 时刻）。相反，您应该将回调传递给 trackPage：

function trackPage(callback) {
    var elqTracker = new jQuery.elq(459);
    elqTracker.pageTrack({
        success: function() {
            elqTracker.getGUID(function(guid) {
                alert(guid);
                // Instead of this: var returnValue = guid;
                // You should use your callback function
                callback(guid);
            });
        }
    });
    return returnValue;
}

trackCode(function(guid) {
    // perform some actions with guid
});

【讨论】：