为什么这个JavaScript无限循环

Why is this javascript looping infinitely?

本文关键字：无限循环 JavaScript 为什么      更新时间：2023-09-26

方法constructBuilder()不应该无限地循环，因为它设置为只循环 10 次，并且 data.length 的值永远不会改变。

这个循环和方法实际上工作得很好，直到我在循环中调用另一个方法。

当我在此循环中调用getOptions(type)方法时，i的值变化非常奇怪，并且始终遵循以下模式：

1st run: i=0
2nd run: i=1
3rd run: i=3
4th run: i=5
5th run: i=6
6th run: i=4
7th run: i=4
8th run: i=4
nth run: i=4

i的值卡在 4，不递增，循环无限运行！

为什么会这样？？

这是代码：

var data = [["Text Array", "Some more text", "btnText", "btn2text"],
            ["Text2", "2: more text", "btnText2", "btn2text2"],
            ...
           ];
var products, order;
function initialise() {
    products = loadProducts();
    order = new Order();
    constructBuilder();
}
function constructBuilder() {
    var qb_boxes_innerHTML = "";
    for (i=0; i<data.length; i++) {
      alert("i="+i + "; data length="+data.length);
      var box_innerHTML = "<table width=100% height=100% cellpadding=0; cellspacing=0; border=0>";
      box_innerHTML += "<tr><td width=100% height='"50px'">" + data[i][0] + "</td></tr>";
      box_innerHTML += "<tr><td width=100% class='"scroll'" valign='"top'">" + data[i][1] + getOptions(i) + "</td></tr>";
      box_innerHTML += "<tr><td width=100% height='"50px'" align='"right'" valign='"middle'"><form action='"javascript:next();'"><input type='"button'" value='""
                    + data[i][2] + "'" onClick='"prev();'"/><input id='"continueBtn'" type='"submit'" value='""
                    + data[i][3] + "'" disabled/></form></td></tr>";
      box_innerHTML += "</table>";
      qb_boxes_innerHTML += "<div id='"qb_box" + i + "'" class='"qb_box'" style='"visibility: hidden;'">" + box_innerHTML + "</div>";
    }
    document.getElementById("qb_boxes").innerHTML = qb_boxes_innerHTML;
    document.getElementById("qb_box0").style.visibility = "";
}
function getOptions(type) {
    var optionsList = getProducts(products, type);
    var options_html = "";
    for (i=0; i<optionsList.length; i++) {
      options_html += "<input id='"check"+type+"_"+i+"'" type='"checkbox'"/>" + optionsList[i].name + "<BR/>";
    }
    return options_html;
}
function getProducts(productList, type) {
      var productsOfType = new Array();
      for (i=0; i<productList.length; i++) {
        if (productList[i].type == type)
            productsOfType.push(productList[i]);
      }
      return productsOfType;
}

如果您需要更多信息，请发表评论。

谢谢你的关注。

通过使用不var i，您实际上是在使用全局变量window.i。更改函数，以便将i声明为局部变量：

function constructBuilder() {
    var qb_boxes_innerHTML = "";
    var i;
    /* ... */
}

您的i变量是全局的，因此每个函数中的循环共享同一个计数器。在for循环声明 （for(var i = 0; ...） 中使用 var 关键字来声明局部变量。

问题是在constructBuilder（）中调用getOptions（i）。 当您在全球范围内声明"i"时，i 的值在您的情况下不断变回 4

相关文章：