遅延の追加 - getJSONとjquery

Question

<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を使用してデータを取得するためのコードをいくつか作成しました。

データを取得したら、ループして内容を表示しています。私の問題は、すべてのコンテンツを1回のヒットで表示できることですが、各ループの間に遅延を追加してニュースティッカーのように少し表示したいと思います。

私はほぼそこにいると思いますが、現在のフォームのコードは配列の最後の項目のみを表示しています。私がdevtoolsを使ってステップすれば、正しいことをしているようですが、自動的に遅延を追加する方法は分かりません。

setTimeoutなどを試してみますが、無視されますか？

Answer 1

すべてのsetTimeoutはほとんど同じインスタンスで実行されます。 ようで、

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

は、すべてを一度に、3秒後に（）の3 FOOを実行します。彼らは後で単にその後、あなたの関数を取得します

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); 
    }); 
});