努力从JavaScript回调函数返回对象

Question

我正在使用AddThis JavaScript API。 我在苦苦挣扎的方法记录在这里：

http://support.addthis.com/customer/portal/articles/1137944-getting-counter-values-dynamically

我可以从“ obj”对象获取所需的数据-但只能在该方法中。 我似乎无法将数据返回到可以在jQuery循环中使用的全局变量。 问题是我对Javascript对象的了解有限。 这是我的代码：

    addthis.addEventListener('addthis.ready', addthisReady);
function addthisReady() {

    var myobj = {};
    addthis.sharecounters.getShareCounts({service: ['facebook', 'twitter', 'pinterest'], countUrl: 'http://www.addthis.com/'}, function(obj) {
        console.log(obj); // OK
        myobj = obj;

    });
    console.log(myobj); // Not OK
}

我的最终目标是在页面上具有多个文章链接，然后使用jQuery和此API方法将总份额计数附加到其链接标题中。 例如;

• 文章链接X（22股）
• 文章链接Y（13股）
• 文章链接Z（13股）

任何帮助将是巨大的。

CJ

进度更新-快到了...

以下代码会影响您的建议，并由API供应商提供示例。 它几乎就在那儿，但回调函数仅随机更新Each循环中的一个元素。

示例代码-已注释掉-表明应该可以多次调用该方法。

这是代码：

$(document).ready(function(){


addthis.addEventListener('addthis.ready', addthisReady);
function addthisReady() {
    /*
    addthis.sharecounters.getShareCounts('facebook', function(obj) {
        document.getElementById('basic-example').innerHTML = '<code>'+JSON.stringify(obj, undefined, 4)+'</code>';
    });

    addthis.sharecounters.getShareCounts(['facebook', 'twitter', 'pinterest'], function(obj) {
        document.getElementById('multiple-services').innerHTML = '<code>'+JSON.stringify(obj, undefined, 4)+'</code>';
    });

    addthis.sharecounters.getShareCounts({service: 'facebook', countUrl: 'http://www.addthis.com/'}, function(obj) {
        document.getElementById('specific-url').innerHTML = '<code>'+JSON.stringify(obj, undefined, 4)+'</code>';
    });

    addthis.sharecounters.getShareCounts({service: ['facebook','twitter'], countUrl: 'http://www.addthis.com/'}, function(obj) {
        document.getElementById('specific-url-multiple-services').innerHTML = '<code>'+JSON.stringify(obj, undefined, 4)+'</code>';
    });
    */

    $('.ico-shares').each(function(index) {

        var elem = this;
        var share_url  =  $(elem).attr('href').split('#')[0];
        var shareLabel = $(elem).text();
        var total_count = 0;

        //Request Counts
        addthis.sharecounters.getShareCounts({service: ['facebook', 'twitter'], countUrl: share_url}, function(obj) {

            for (var key in obj)
            {
                total_count  += obj[key].count;
            }
            if (total_count > 0)
            {
                shareLabel = total_count + ' Share';
            }
            if (total_count > 1)
            {
                shareLabel = total_count + ' Shares';
            }
            alert(shareLabel);
            $(elem).text(shareLabel);

        });
    });
}

}）;

我的网址在这里： http : //banarra.cjweb.com.au/html/news_article.php

请注意，底部有3篇“更多新闻”文章，但只有一篇文章的“共享”链接已更新。

非常感谢你花时间陪伴。

CJ

Answer 1

您发布的代码不会成为问题。

如果您发送了请求，然后等待了几秒钟，然后使用控制台检查了该变量的值，则应该看到它已设置为期望的值。

问题是异步性。

看，当您向服务器发送请求时（即，当该函数实际触发时），在移至下一行代码之前，它不会坐在那里并等待它返回。

因此，如果您的代码如下所示：

var myObj = {};
getAsyncData(function myCallback (o) { myObj = o; });
console.log(myObj);

实际上将要发生的是该函数将被触发，并且您的代码将继续运行。

服务器尚未返回您的数据，因此myObj === {} 。
稍后，服务器将返回您的数据，并运行您提供的功能。

因此，如果您有段时间回来：

setTimeout(function () { console.log(myObj); }, 10000); // 10 sec

然后，您应该看到它已被设置。

这里的窍门是，您实际上需要在异步代码中触发内容。
程序的其余部分不知道任何更改或任何新内容，并且肯定还没有等待它。

var myObj = {};
getAsyncData(function (o) { myObj = o; doStuff(myObj); });
var doStuff = function (obj) { console.log("Back from the server"); console.log(obj); };

为此，我建议您查看评论中的链接。

编辑

为了更好地解决问题（不是很多解决方案），想象一下您的异步调用使用了setTimeout来触发函数并传递数据。
您不会希望整个JS应用程序都坐下来等待setTimeout一个更改。

var data_is_set = false,
    get_data = function (callback) {
        var data = true,
            time_to_wait = 3000; // 3sec
        setTimeout(function () { callback(data); }, time_to_wait);
    };

get_data(function (val) { data_is_set = val; });

console.log(data_is_set); // false

程序的其余部分将一直运行，直到时间流逝，然后函数才被调用。
没有其他人知道发生了什么，因此您需要创建可以触发更新的函数，您可以在回调内部进行调用。

Answer 2

您可以只返回obj吗？

var myobj = addthis.sharecounters.getShareCounts({service: ['facebook', 'twitter', 'pinterest'], countUrl: 'http://www.addthis.com/'}, function(obj) {
    console.log(obj); // OK
    return obj;
});