嵌套循環增量產生不一致的結果

Question

我試圖在嵌套循環中使用循環當前迭代的變量。

但是，當我執行下面的代碼循環錯誤地從f = 6開始，然後它正確迭代嵌套循環。

我已經刪除了所有其他代碼，然後它正常工作。不過，我不知道什麼可能會干擾循環。這可能是有原因的，我希望你們能幫我弄清楚這一點 - 並且可能會更多地瞭解爲什麼會出現這種行爲。

for (var f = 0; f < 6; f++) { 

    var JSONURL = "http://blabla.com/json"; 

    $.ajax(JSONURL, { 
    dataType: "json" 
    }) 
    .done(function(json) { 

     for (var i = 0; i < json.timeslots.length; i++) { 

      var StartHour = json.timeslots[i].begintijd.split(":")[0]; 
      var StartMinute = json.timeslots[i].begintijd.split(":")[1]; 
      var EndHour = json.timeslots[i].eindtijd.split(":")[0]; 
      var EndMinute = json.timeslots[i].eindtijd.split(":")[1]; 

      //Calculate top distance of block in pixels 
      if (StartHour < 20) { 
       var TopDistance = ((parseInt(StartHour) - 9) * 240) + (parseInt(StartMinute) * 4); 

      } 

      //Calculate height of block in pixels 
      var BlockHeight = ((((parseInt(EndHour) * 60) + (parseInt(EndMinute))) - ((parseInt(StartHour) * 60) + (parseInt(StartMinute)))) * 4) - 2.5; 

      //Generate HTML for blocks 

      var html_first = '<div data-ix="show-pop-up" class="w-clearfix time-block event-block" style="height:'+BlockHeight+'px; top:'+TopDistance+'px; background-color:'+json.timeslots[i].achtergrondkleur+';">'; 
      if (json.timeslots[i].afbeelding.length > 0) { 
       var html_mid = '<div class="avatar" style="background-image:url('+json.timeslots[i].afbeelding+');"></div>'; 
      } 
      else { 
       html_mid = ""; 
      } 
      var html_last = '<h4 class="card-title">'+json.timeslots[i].naam+'</h4><div class="time-indication">'+json.timeslots[i].begintijd+'</div><div class="speaker-description">'+json.timeslots[i].functie+'</div><div class="hidden-content"><div class="pop-up-wrapper" style="background-color:'+json.timeslots[i].achtergrondkleur+';"><div class="w-clearfix pop-up-header-background"><div data-ix="hide-pop-up" class="close-icon" id="PopupClose"></div><h3 class="white pop-up-title">'+json.timeslots[i].naam+'</h3><div class="pop-up-subtitle">'+json.timeslots[i].functie+'</div></div><div class="w-clearfix pop-up-body"><div class="pop-up-avatar" style="background-image:url('+json.timeslots[i].afbeelding+');"></div><div class="w-clearfix"><div class="pop-up-card-detail-wrap"><div class="time-label">Begint om</div><div class="pop-up-time-text">'+json.timeslots[i].begintijd+'</div></div><div class="pop-up-card-detail-wrap"><div class="time-label">Eindigt om</div><div class="pop-up-time-text">'+json.timeslots[i].eindtijd+'</div></div><div class="pop-up-card-detail-wrap"><div class="time-label">plek</div><div class="pop-up-time-text">Zaal 1</div></div></div><p class="pop-up-paragraph">'+json.timeslots[i].beschrijving_lang+'</p></div><div class="pop-up-footer"><a href="'+json.timeslots[i].leesmeer_url+'" class="w-button paragraph-button">Meer over deze spreker</a></div></div></div></div>'; 

      var html = html_first+html_mid+html_last; 
      var TargetDiv = "#Locatie"+f+"Column"; 

      alert("Parent loop increment: "+f); 
      alert("Child loop increment: "+i); 
      $(TargetDiv).append(html); 
     } 
    }); 
} 

Answer 1

它開始於f = 6，因爲你的回調不會被調用，直到f等於6

後，你可能會做什麼是值得的效果：

for (var f = 0; f < 6; f++) { 

    var JSONURL = "http://blabla.com/json"; 

    $.ajax(JSONURL, { 
    dataType: "json" 
    }) 
    .done(handleResponse.bind(null, f)); 
} 

function handleResponse(f, json) { 
    for (var i = 0; i < json.timeslots.length; i++) { 

     var StartHour = json.timeslots[i].begintijd.split(":")[0]; 
     var StartMinute = json.timeslots[i].begintijd.split(":")[1]; 
     var EndHour = json.timeslots[i].eindtijd.split(":")[0]; 
     var EndMinute = json.timeslots[i].eindtijd.split(":")[1]; 

     //Calculate top distance of block in pixels 
     if (StartHour < 20) { 
      var TopDistance = ((parseInt(StartHour) - 9) * 240) + (parseInt(StartMinute) * 4); 

     } 

     //Calculate height of block in pixels 
     var BlockHeight = ((((parseInt(EndHour) * 60) + (parseInt(EndMinute))) - ((parseInt(StartHour) * 60) + (parseInt(StartMinute)))) * 4) - 2.5; 

     //Generate HTML for blocks 

     var html_first = '<div data-ix="show-pop-up" class="w-clearfix time-block event-block" style="height:'+BlockHeight+'px; top:'+TopDistance+'px; background-color:'+json.timeslots[i].achtergrondkleur+';">'; 
     if (json.timeslots[i].afbeelding.length > 0) { 
      var html_mid = '<div class="avatar" style="background-image:url('+json.timeslots[i].afbeelding+');"></div>'; 
     } 
     else { 
      html_mid = ""; 
     } 
     var html_last = '<h4 class="card-title">'+json.timeslots[i].naam+'</h4><div class="time-indication">'+json.timeslots[i].begintijd+'</div><div class="speaker-description">'+json.timeslots[i].functie+'</div><div class="hidden-content"><div class="pop-up-wrapper" style="background-color:'+json.timeslots[i].achtergrondkleur+';"><div class="w-clearfix pop-up-header-background"><div data-ix="hide-pop-up" class="close-icon" id="PopupClose"></div><h3 class="white pop-up-title">'+json.timeslots[i].naam+'</h3><div class="pop-up-subtitle">'+json.timeslots[i].functie+'</div></div><div class="w-clearfix pop-up-body"><div class="pop-up-avatar" style="background-image:url('+json.timeslots[i].afbeelding+');"></div><div class="w-clearfix"><div class="pop-up-card-detail-wrap"><div class="time-label">Begint om</div><div class="pop-up-time-text">'+json.timeslots[i].begintijd+'</div></div><div class="pop-up-card-detail-wrap"><div class="time-label">Eindigt om</div><div class="pop-up-time-text">'+json.timeslots[i].eindtijd+'</div></div><div class="pop-up-card-detail-wrap"><div class="time-label">plek</div><div class="pop-up-time-text">Zaal 1</div></div></div><p class="pop-up-paragraph">'+json.timeslots[i].beschrijving_lang+'</p></div><div class="pop-up-footer"><a href="'+json.timeslots[i].leesmeer_url+'" class="w-button paragraph-button">Meer over deze spreker</a></div></div></div></div>'; 

     var html = html_first+html_mid+html_last; 
     var TargetDiv = "#Locatie"+f+"Column"; 

     alert("Parent loop increment: "+f); 
     alert("Child loop increment: "+i); 
     $(TargetDiv).append(html); 
    } 
} 

這樣做是什麼通過在循環運行時傳遞f的值來調用handleResponse。

Answer 2

問題不是嵌套循環，而是循環內的異步調用。要解決此問題，您可以使用立即調用的匿名函數將正確的值傳遞給函數，如下所示：

for (var f = 0; f < 6; f++) { 
    (function(foo) { 
     //ajax call 
     //your ajax call will now have the correct number 
    })(f); 
}