使用ajax时Javascript "for"循环问题，即使条件为假，循环也可以访问

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

去年关闭 。

与 Laravel 合作，我们正在开发的系统在“onready”事件的这个 View 上崩溃了。查看代码后发现问题出在for循环内部。

$(document).ready(function() {
var url = "{{ route('routeToGetAuctions') }}";
$.ajax({
  url : url,
  type : "GET"
})
.done(function(data) {
  for (var j = 0; j < data.auctions.length; j++) {
    ...
    $('#object').downCount(data.auctions[j].auction, {
      startDate: data.auctions[j].startDate,
      endDate: data.auctions[j].endDate,
      offset: data.auctions[j].offset
    }, function() {
        //Class management to show the auctions
        finishedAuctions.push(data.auctions[j].auction);
        $('#countdown-bg-'+data.auctions[j].auction).removeClass('bg-primary');
        $('#countdown-bg-'+data.auctions[j].auction).addClass('bg-secondary');
        $('#progress-'+data.auctions[j].auction).removeClass('bg-primary');
        $('#progress-'+data.auctions[j].auction).addClass('bg-secondary');
    });
  }
});

这非常适合我们的需要...但是，假设存在 3 个可用的拍卖，data.auctions.length值为 3，并执行 console.log('value of j: ' + j)为了调试 for 循环，它以某种方式打印:

value of j: 0
value of j: 1
value of j: 2
value of j: 3

然后当它尝试到达大小为 3 (0,1,2) 的数组的索引 3 时崩溃。

我们所做的伪修复是 try catch 代码块，因为无论数组中存在多少项，这个问题都会持续存在，并且它总是到达最后一个索引 + 1:

$(document).ready(function() {
    var url = "{{ route('routeToGetAuctions') }}";
    $.ajax({
      url : url,
      type : "GET"
    })
    .done(function(data) {
      for (var j = 0; j < data.auctions.length; j++) {
        ...
        $('#object').downCount(data.auctions[j].auction, {
          startDate: data.auctions[j].startDate,
          endDate: data.auctions[j].endDate,
          offset: data.auctions[j].offset
        }, function() {// Try Catch to fix unknown problem with loop
          try {
            finishedAuctions.push(data.auctions[j].auction);
            $('#countdown-bg-'+data.auctions[j].auction).removeClass('bg-primary');
            $('#countdown-bg-'+data.auctions[j].auction).addClass('bg-secondary');
            $('#progress-'+data.auctions[j].auction).removeClass('bg-primary');
            $('#progress-'+data.auctions[j].auction).addClass('bg-secondary');
          } catch (e) {
            //here the index exception is prevented and the view won't crash.
          }
        });
      }
    });

我们做了简单而愚蠢的修复，但我们还没有找到为什么会发生这种情况，for 循环如何，假设 data.auctions.length = 3 ，打印0,1,2,3 ？

Answer 1

倒计时完成后，将执行 downCount 回调。这意味着这不会立即执行。

因此，您的循环会不断增加“j”，这意味着一旦执行回调，“j”将处于最大值。

这是您所经历的简单演示。它将多次记录“5”，而不是 0、1、2、3、4。之所以是5，是因为i会先递增，然后再检查条件!这正是您的代码崩溃的原因。由于 j 递增最多比数组长度多 1，因此要检查条件!

for (var i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100)
}

最简单的解决方案是使用 let 而不是 var，因为它们是范围限制的。

for (let i = 0; i < 5; i++) {
  setTimeout(function() {
    console.log(i)
  }, 100)
}

如果您无权访问let，您可以使用闭包

for (var i = 0; i < 5; i++) {
  (function(val) {
    setTimeout(function() {
    console.log(val)
  }, 100)
  })(i)
}

@Vlaz 的范围界定文章是正确的。这是一本很好的读物，可以进一步启发您!