2014-01-28 2 views
0

나는 AddThis JavaScript API로 작업하고 있습니다. 내가 여기에 설명되어 고민하고있어서자바 스크립트 콜백 함수에서 객체를 반환하기 위해 애 쓰고 있습니다.

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

나는 내가 "OBJ"개체에서 필요한 데이터를 얻을 수 있습니다 -하지만 그 방법 내에서. 내 jQuery 루프에서 사용할 수있는 전역 변수에 데이터를 반환 할 수 없습니다. 문제는 자바 객체에 대한 제한된 이해입니다. 여기 내 코드는 다음과 같습니다

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 방법을 사용하는 것입니다. EG;

  • 기사 링크 X (22 주)
  • 제 링크 Y (13 주)
  • 제 링크 Z (13 주식은)

어떤 도움 그랜드 될 것이다.

CJ

진행 UPDATE - 거의 다 ...

조언 요인 아래의 코드와 예제는 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

+1

여기를 참조하십시오. http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-ajax-call – elclanrs

+0

jQuery 루프는 어디에 있습니까? getShareCounts에 –

+0

이 있으면 콜백을 비동기 적으로 호출합니까? 그렇다면 변수는 getShareCounts 호출 직후에 업데이트되지 않습니다. –

답변

3

게시 한 코드는 문제가되지 않습니다.

요청을 보낸 다음 몇 초 기다린 다음 콘솔을 사용하여 변수의 값을 확인하면 예상 한 값으로 설정되어 있는지 확인해야합니다.

문제는 비동기입니다.

서버에 요청을 보낼 때 (즉, 해당 함수가 실제로 실행될 때), 다음 코드 행으로 이동하기 전에 거기에 앉아 기다릴 필요가 없습니다.실제로 일어날 무엇

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 

나머지 프로그램이 실행될 때까지 그 시간이 지나면 함수가 호출됩니다.
아무도 아무 일도 없었으므로 콜백 내부에서 호출 할 수있는 업데이트를 트리거하는 함수를 만들어야합니다.

+0

Norguard에게 감사드립니다. 설명이 도움이됩니다. 콘솔 로그가 예상 된 순서대로 다시 나오기 때문에 비동기와 관련이 있습니다. 나는 그 링크를 확인하고 마침내 이것을 감싸하려고 노력할 것이다. – CJWEB

+0

@CJWEB JS에서 타이머에 대한 경험이 있다면 편집을 통해 문제에 대한 시각을 얻을 수 있습니다 (해결책이 아님). (개인적으로, 나는 오늘 사용할 수있는'Promises'와 JS의 다음 주요 버전에있을'Generators '를 좋아하지만)'call''.update() '방법도 효과가있다. – Norguard

1

obj를 반환 할 수 있습니까?

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