Javascript - for循环只迭代一次

Javascript - for loop iterates only once?

本文关键字:一次 迭代 for 循环 Javascript      更新时间:2023-09-26

我有一个for循环,但是它只执行了一次,而它应该执行两次。

$appointments变量保存ajax调用返回的数据。当我console.log($appointments.length)我得到两个是正确的,但迭代只发生一次,我不知道为什么。
       for (var i = 0; i < $appointments.length; i+=1) {
          var rangeStart_hour = $appointments[i].timerange.substring(0, 2); 
          var rangeStart_minutes = $appointments[i].timerange.substring(3, 5); 
          var rangeEnd_hour = $appointments[i].timerange.substring(11, 13); 
          var rangeEnd_minutes = $appointments[i].timerange.substring(14, 16); 
          var rangeS = rangeStart_hour + rangeStart_minutes; 
          var rangeE = rangeEnd_hour + rangeEnd_minutes; 
          var rangeStart = parseInt(rangeS); 
          var rangeEnd = parseInt(rangeE); 
          var range=0;
          if(parseInt(rangeStart_hour) == 12){
            if(parseInt(rangeStart_minutes) == 0){
              range = rangeEnd - 0; 
            }else{
              range = rangeEnd - (parseInt(rangeStart_minutes)+20); 
            }
          }else{
            if(parseInt(rangeStart_minutes) == 30 && parseInt(rangeEnd_minutes) == 0){
              // if start time 1:30 ,end time 3:00
              range = (rangeEnd - (rangeStart + 20)); // 300 - 150 = 150
            }else if(parseInt(rangeStart_minutes) == 0 && parseInt(rangeEnd_minutes) == 30){
              range = ((rangeEnd+20) - rangeStart);
            }else{
              range = rangeEnd - rangeStart;
            }
          }
          console.log(range);
          for(var i=1; i<(range/50); i++){
            $("a[data-time='"+(rangeStart)+"']").addClass('time');
            rangeStart += 50;
          };
        };

这个结构看起来不是个好主意:

for (var i = 0; i < $appointments.length; i += 1) {
    //...
    for (var i = 1; i < (range/50); i++){
        //...
    }
}

可能希望为嵌套的循环计数器使用不同的变量名。

如果更改

,则在第二个for循环中重新初始化变量i
for(var i=1; i<(range/50); i++){
    $("a[data-time='"+(rangeStart)+"']").addClass('time');
    rangeStart += 50;
};

使用不同的变量,例如j,它应该可以正常工作。

在JavaScript中,变量的作用域是函数作用域。这意味着所有变量声明都被提升到函数的顶部。所以,在你的例子中:

for (var i = 0; i < $appointments.length; i += 1) {
    ...
    for (var i = 1; i < (range/50); i++){ 
        ...
    };
};

=
var i; // two variables with the same name are hoisted as the same variable.
for (i = 0; i < $appointments.length; i += 1) {
    ...
    for (i = 1; i < (range/50); i++){ 
        ...
    };
};
因此,在第二个循环结束时,"i"将大于或等于range/50。如果此值不小于$appointments。长度,第一个循环将在第一轮后终止。

重要提示: JavaScript没有块作用域。通过块引入的变量的作用域限定在包含它们的函数或脚本中,设置它们的效果会在块本身之外持续存在。换句话说,块语句不引入作用域。虽然"独立"块是有效的语法,但你不希望在JavaScript中使用独立块,因为如果你认为它们在C或Java中做类似的事情,它们不会做你认为它们做的事情。

在你的代码中,"i"变量使用了两次,所以第二次初始化值是在循环的第一个中递增。这就是为什么循环的第一个条件失败,循环终止的原因。在循环中更改第二个或第一个变量名,然后它将按照您的预期工作