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

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