Warum ist dieses Javascript unendlich looping?

Question

Die Methode constructBuilder() sollte nicht unendlich gehen, da sie nur 10-mal auf eine Schleife eingestellt ist und sich der Wert von data.length niemals ändert.

Diese Schleife & Methode funktioniert perfekt, bis ich eine andere Methode innerhalb der Schleife aufrufen.

Wenn ich die Methode getOptions(type) innerhalb dieser Schleife nennen, folgt der Wert i ändert sich sehr seltsam, und immer dieses Muster:

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 

der Wert i bei 4 stecken bleibt, wird nicht erhöht und die Schleife läuft unendlich!

Warum passiert das ?? Hier

ist der Code:

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

Wenn Sie weitere Informationen benötigen, wenden Sie sich bitte kommentieren.

Danke fürs schauen.

Answer 1

Mit i ohne var verwenden Sie tatsächlich eine globale Variable window.i. Passen Sie Ihre Funktionen, so dass i als lokale Variable deklariert wird:

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

Answer 2

Ihre i Variable global ist, so dass die Schleifen in jeder Funktion sind die gleichen Zähler zu teilen. Verwenden Sie das Schlüsselwort var in Ihrer for Schleifendeklaration (for(var i = 0; ...), um eine lokale Variable zu deklarieren.

Answer 3

Das Problem ruft getOptions (i) in constructBuilder(). Als du "i" global erklärst, ändert sich der Wert von i immer wieder auf 4 in deinem Fall