for循环内的函数调用会中断循环

Question

I have a small fiddle I was experimenting with, and I noticed calling a function inside a for loop condition was stopping the loop. Basically, initially I wanted to do this:

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

But, ended up having to do this to make it work:

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

Here is a link to the Fiddle

Thanks for any help in advance, I feel there is something fundamental here I'm not getting. Thanks

Answer 1

Lesson 0: use ESLint or similar tools to check your code for trivial errors before spending sleepless nights here on SO and/or in debugging tools.

Lesson 1: localize your variables.

Your problem is with variable i that's global - hence reused by both your global code and selectPage function. The latter sets its value to tabs.length , ending up the loop prematurely.

Just replace i = 0 with var i = 0 at each for expression.

Answer 2

Try declaring the x variable using let.

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