全球阵列没有更新后.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内功能

回答

相关问题