努力從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;
});