嵌套循环增量产生不一致的结果

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