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

     }); 
    }); 
} 

}）;

我的URL是在這裏：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; 
});