變量範圍或回報問題（不知道是哪個）

Question

使用下面的腳本我試圖創建一個名爲temptagarray的對象，該對象被填充到Tumblr博客上的所有標籤及其頻率。因此，它應該結束這樣看：

{'performance': 10, 'installation': 5} 

我知道正在創建的對象，它看起來是正確的（我可以把它打印出來在每個循環），但我無法弄清楚如何使用它後/在函數的外部，即在腳本的底部，我試圖將document.write（）寫出來。這是一個全球/本地變量問題，回報問題還是我需要以某種方式解決它？

<script type="text/javascript"> 

var temptagarray = {}; 
var tags; 
var tag;    

function loadPosts() { 

    var key = "api_key=9I4rZAYQCbU1o5TSMZuyrlvXiQsNxKBicCJxNK5OKZ6G9pgdim"; 
    var api = "https://api.tumblr.com/v2/blog/garrettlynch.tumblr.com/"; 

    var retrieve_more = function (offset) { 
     $.getJSON(api + "posts?callback=?&filter=image&limit=20&offset=" + offset + "&" + key,function(data) { 


      //for each item (post) in the response 
      $.each(data.response.posts, function(i, item) { 

       //pull out the posts tags 
       tags = item['tags']; 

       //loop through the tags 
       for (i = 0; i < tags.length; i++) 
       { 
        tag = tags[i]; 

        //if the tag already exists in the tag array 
        if (temptagarray[tag]) 
        { 
         temptagarray[tag] = temptagarray[tag] + 1; 
        } 
        else 
        { 
         temptagarray[tag] = 1; 
        } 
       } 

      }); 

      if (data.response.posts.length == 20) { 
       retrieve_more(offset + 20); 
      } 

     }); 

    }; 

    retrieve_more(0); 
} 

loadPosts(); 

document.write(JSON.stringify(temptagarray)); 

</script> 

在此先感謝 加勒特第一

Answer 1

替換此：

if (data.response.posts.length == 20) { 
    retrieve_more(offset + 20); 
} 

...這一點：

if (data.response.posts.length == 20) { 
    retrieve_more(offset + 20); 
} else { 
    document.write(JSON.stringify(temptagarray)); 
} 

您遇到的問題是，儘管你document.write(...)命令位於代碼中的Ajax調用下面， ajax調用是異步的，因此回調也將被異步調用。基本上，document.write(...)早在您有機會與ajax回調中的temptagarray變量進行交互之前就會被調用。

Answer 2

第一件事 - AJAX is Async異步。

因此，代碼塊不會等待先前的指令完成，然後執行下一行。

所以你的document.writeline已經執行的時候，響應回來。

嘗試在if塊之後的成功回調中打印該信息，您確實會看到回覆。

Answer 3

感謝您的回覆。下面是我現在作爲一個可行的解決方案，因爲結果將會調用另一個函數。多讀一點我想知道我是否應該使用回調 - 是否更好？

<script type="text/javascript"> 

//load posts from a Tumblr weblog 
function loadPosts() { 

    //api key and weblog address 
    var key = "api_key=9I4rZAYQCbU1o5TSMZuyrlvXiQsNxKBicCJxNK5OKZ6G9pgdim"; 
    var api = "https://api.tumblr.com/v2/blog/garrettlynch.tumblr.com/"; 

    //tags object 
    var temptagarray = {}; 

    //all tags and each tag 
    var tags; 
    var tag; 

    //looping function to keep retrieving posts until all are retrieved 
    var retrieve_more = function (offset) { 
     $.getJSON(api + "posts?callback=?&filter=image&limit=20&offset=" + offset + "&" + key,function(data) { 


      //for each item (post) in the response 
      $.each(data.response.posts, function(i, item) { 

       //pull out the posts tags 
       tags = item['tags']; 

       //loop through the tags 
       for (i = 0; i < tags.length; i++) 
       { 
        //pull out each tag 
        tag = tags[i]; 

        //if the tag already exists in the tag array 
        if (temptagarray[tag]) 
        { 
         //add 1 to its count 
         temptagarray[tag] = temptagarray[tag] + 1; 
        } 
        else 
        { 
         //set its count to 1 
         temptagarray[tag] = 1; 
        } 
       } 
       //to test object as it gets added to 
       //$("#Posts ul").append('<li>' + JSON.stringify(item, ['tags']) + '</li>') 
      }); 

      //if the number of posts is more than 20 
      if (data.response.posts.length == 20) 
      { 
       //retrieve the next 20 
       retrieve_more(offset + 20); 
      } 
      else 
      { 
       //call the show result function 
       showresult(temptagarray); 
      } 

     }); 

    }; 

    //stop retrieving posts 
    retrieve_more(0); 
} 

loadPosts(); 

function showresult(tagarray) 
{ 
    $("#Posts ul").append('<li>' + JSON.stringify(tagarray) + '</li>'); 
    //document.write(JSON.stringify(tagarray)); 
} 

</script>