Funktionsaufruf innerhalb einer for-Schleife bricht die Schleife

Question

Ich habe eine kleine Geige, mit der ich experimentiert habe, und ich bemerkte, dass das Aufrufen einer Funktion innerhalb einer for-Schleife-Bedingung die Schleife beendete. Grundsätzlich zunächst wollte ich dies tun:

// add event listeners to tabs 
for (i=0;i<tabs.length;i++) { 
    tabs[i].addEventListener('click', function(event) { 
     var tab = event.target; 
     selectPage(tab.dataset.tab); 
     changeTab(tab); 
    }); 
    if (tabs[i].classList.contains('active')) { 
     selectPage(tabs[i].dataset.tab); 
    } 
} 

Aber, landete mit, dies zu tun, damit es funktioniert:

// add event listeners to tabs 
for (i=0;i<tabs.length;i++) { 
    tabs[i].addEventListener('click', function(event) { 
     var tab = event.target; 
     selectPage(tab.dataset.tab); 
     changeTab(tab); 
    }); 
} 
// find active class and set page 
for (i=0;i<tabs.length;i++) { 
    if (tabs[i].classList.contains('active')) { 
    selectPage(tabs[i].dataset.tab); 
    } 
} 

Hier ist ein Link auf den Fiddle

Vielen Dank für jeden Hilfe im Voraus, ich fühle, dass hier etwas Grundlegendes ist, das ich nicht bekomme. Danke

Answer 1

Lektion 0: Verwenden Sie ESLint oder ähnliche Tools, um Ihren Code auf triviale Fehler zu überprüfen, bevor Sie schlaflose Nächte hier auf SO und/oder in Debugging-Tools verbringen.

Lektion 1: Lokalisieren Sie Ihre Variablen.

Ihr Problem ist mit der Variable i, die global ist - daher wiederverwendet von Ihrem globalen Code und selectPage Funktion. Letzterer setzt seinen Wert auf tabs.length und beendet die Schleife vorzeitig.

Ersetzen Sie einfach durch var i = 0 bei jedem Ausdruck for Ausdruck.

Answer 2

Versuchen Sie, die x-Variable mit let zu deklarieren.

// add event listeners to tabs 
for (let i=0;i<tabs.length;i++) { 
    tabs[i].addEventListener('click', function(event) { 
    var tab = event.target; 
    selectPage(tab.dataset.tab); 
    changeTab(tab); 
    }); 
    if (tabs[i].classList.contains('active')) { 
    selectPage(tabs[i].dataset.tab); 
    } 
}