添加延迟 - getJSON和jQuery

<script> 

    //GET THE DATA 
    $.getJSON('https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail/status', function(data) { 

     var counter = 1; 
     console.log(data); 

     $.each(data, function(index,station) { 

      $.each(station.lineStatuses, function(index,value2) { 

       if (counter <= 16) { 
        if (station.name != 0) { 
         var stationName = station.name; 
         var stationStatus = value2.statusSeverityDescription; 
         var stationStatusReason = value2.reason; 

         $("#stationStatus").append(
          $("<div>") 
          .addClass("row")); 

         $("#stationStatus").empty().append(
          $("<div/>") 
          .addClass("stationName col-sm-6") 
          .append(stationName)); 

         $("#stationStatus").append(
          $("<div/>") 
          .addClass("stationStatus col-sm-6") 
          .append(stationStatus)); 

         if (stationStatusReason != undefined) { 
          $("#stationStatus").append(
           $("<div/>") 
           .addClass("stationStatusReason col-sm-12") 
           .append(stationStatusReason)); 
         } 
        counter++; 
        } 
       } 
      }); 
     }); 
    }); 
</script>

我创建了一些代码来检索一些数据使用getJSON。添加延迟 - getJSON和jQuery

一旦我有数据循环显示内容。我的问题是我可以显示所有的内容，但我希望在每个循环之间添加一个延迟，因此它显示的有点像新闻动态。

我想我快到了，但我目前的形式代码只显示数组中的最后一项。如果我逐步使用devtools，它似乎在做正确的事情，但我不知道如何自动添加延迟？

我尝试使用setTimeout和类似的，但它被忽略？

来源

2016-12-01 Michael Cummins

可以重新格式化你的代码，包括你的setTimeout尝试？我在这里发布了重新格式化http://pastebin.com/Df3F2Y0C –

作为对你的问题的快速回答，setTimeOut设置了'将来'的超时时间，所以如果你将所有的超时设置为相同的值，那么他们会在同一时间进行处理。所以如果你想错开更新，只需增加setTimeOut *计数器 –

所有setTimeout都在几乎相同的实例上运行;然后作为，

setTimeout(foo(),3000) 
setTimeout(foo(),3000) 
setTimeout(foo(),3000)

将运行3 FOO（）一切都在一次，3秒后。为了让他们以后运行简单地将其更改为

setTimeout(foo(),3000*0) 
setTimeout(foo(),3000*1) 
setTimeout(foo(),3000*2)

然后你会得到你的功能，在跑了0,1,2秒。

在你的榜样的形式，

$.getJSON('https://api.tfl.gov.uk/line/mode/tube,overground,dlr,tflrail/status', function(data) { 
    function readLineStatus(station,lineStatus){ 
    if (counter <= 16) { 
     if (station.name != 0) { 
     console.log(station); 
     console.log(lineStatus); 
     } 
     counter++; 
     console.log('Counter: '+counter); 
    } 
    } 
    function readStation(station,timeout){ 
    return function(){ 
     $.each(station.lineStatuses, function(index,lineStatus) { 
     readLineStatus(station,lineStatus) 
     }); 
    }; 
    } 
    var counter=1; 
    $.each(data, function(index,station) { 
    console.log('station index:'+index); 
    var timeout = 500*index; 
    setTimeout(readStation(station,timeout), timeout); 
    }); 
});

来源

2016-12-01 19:54:00

辉煌！很棒。 –

没问题，这个问题已经很好的定义了，我很容易测试你的问题！（你很可能会继续从这样的问题中得到很好的答案）既然你在这里是新人，请不要忘记标记接受的答案，这对解决问题最有帮助。另请参阅[如何接受答案的工作？]（http://meta.stackexchange.com/questions/5234/how-does-accepting-an-answer-work） –

添加延迟 - getJSON和jQuery

回答

相关问题