全球陣列沒有更新後.push內功能

嘿傢伙誰可以幫助我出去？基本上我想創建一個突發新聞頁腳，通過newsWire數組循環並自動更新文本。問題是當我在loadNewswire函數外部運行我的console.log（newsWire.length）時，它返回0，而console.log裏面返回40，因爲它應該是？全球陣列沒有更新後.push內功能

鏈接：http://jsfiddle.net/u8y8zh72/3/

<html> 
<head> 
    <script src="https://code.jquery.com/jquery-2.1.4.js"></script> 
    <style> 
     footer { 
      height: 75px; 
      position: fixed; 
      bottom: 0; 
     } 
    </style> 
</head> 
<body> 
    <div class="container"> 
    <ul id="js-news" class="js-hidden"></ul> 
    </div> 
    <footer> 
     <div class="container" id="newswiretxt"> 
     <span></span> 
     </div> 
    </footer> 
</body> 
<script type="text/javascript"> 
    var newsWire = []; 
    function loadNewswire() { 
     $.getJSON('http://api.nytimes.com/svc/news/v3/content/all/all.json', 
     {'api-key': 'XXXXXXXXX'}, 
     function(data) { 
      console.log(data) 
      var newsWireTemp = []; 
      for (var i = 0; i < data.results.length; i++) { 
       var breakingNews = data.results[i]; 
       var breakingTitle = breakingNews.title; 
       var breakingAbstract = breakingNews.abstract; 
       newsWireTemp.push(breakingTitle); 
       newsWireTemp.push(breakingAbstract); 
      } 
      newsWire = newsWireTemp; 
      console.log(newsWire.length); 
     }); 
    } 
    loadNewswire(); 
    console.log(newsWire.length); 


    $(document).ready(function() { 
    var items = newsWire; 
    $text = $('#newswiretxt span'), 
    delay = 10; //seconds 
    function loop (delay) { 
     $.each(items, function (i, elm){ 
      $text.delay(delay*1E3).fadeOut(); 
      $text.queue(function(){ 
       $text.html(items[i]); 
       $text.dequeue(); 
      }); 
      $text.fadeIn(); 
      $text.queue(function(){ 
       if (i == items.length -1) { 
        loop(delay); 
       } 
      $text.dequeue(); 
      }); 
     }); 
    } 
    loop(delay); 
    }); 
</script>

來源

2015-11-09 Jeppe Gelardi Madsen

'loadNewswire（）'進行異步調用。這意味着'console.log（newsWire。長度）;'在回調之前運行（'newsWire = newsWireTemp;'）。你可以知道，因爲'console.log（newsWire.length）'正在輸出'console.log（newsWire.length）;' –

主要的事情是這樣的：

... 
loadNewswire(); 
console.log(newsWire.length); 
...

當你調用loadNewsWire，你開始一個異步JSON請求。但是，腳本執行不會等待該函數完成，因此它立即運行以下console.log語句。此時，JSON請求尚未完成，因此newsWire數組仍爲空 - 這就是爲什麼console.log(newsWire.length)在那裏返回0的原因。

在你的loadNewsWire函數中，你有一個回調函數，當JSON請求返回你的數據時，你會執行回調函數。此時您正在填充陣列，並且console.log(newsWire.length)會爲您提供預期的計數。

更新響應評論：

反正是有使我的等待功能的其餘部分執行？

是的！ $.getJSON是$.ajax的便捷包裝，它返回jqXHR對象（jQuery documentation中的多汁細節）。您可以向該對象添加額外的回調函數，這就是您在致電$.getJSON時實際執行的內聯函數。以下內容：

$.getJSON('http://...', { 'api-key': '...' }, 
    function (data) { 
     // stuff 
    });

等同於：

$.getJSON('http://...', { 'api-key': '...' }) 
    .done(function (data) { 
     // stuff 
    });

因此，如果您修改loadNewswire返回對象從$.getJSON回來，您可以附加一個回調到它會等待異步操作完成，並將其餘的代碼放在裏面。如果你改變你的代碼如下：

function loadNewswire() { 
    return $.getJSON(
     ... 
    ); 
};

然後，您可以包住代碼要使用done，fail或always回調的一個等待。然後

調用代碼是這樣的：

loadNewswire().done(function() { 
    console.log(newsWire.length); 
    // and any other code you want to hold until the async operation is complete 
});

我建議通過previously mentioned documentation閱讀 - 這是一個有點沉重，但它提供瞭如何使用jQuery的異步請求工作一個很好的概述。

來源

2015-11-09 15:27:05

謝謝，這也是我的想法，因爲我可以看到我的控制檯中的時間數字出現的時間。無論如何，讓我的代碼的其餘部分等待函數執行？ –

@JeppeGelardiMadsen更新回答您的評論。 –

全球陣列沒有更新後.push內功能

回答

相關問題