javascript - for循环内的函数调用打破了循环

Question

我正在尝试一个小 fiddle ，我注意到在 for 循环条件内调用函数会停止循环。基本上，最初我想这样做:

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

但是，最终不得不这样做才能使其正常工作:

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

这里是 Fiddle 的链接

感谢您提前提供的任何帮助，我觉得这里有一些基本的东西我没有得到。谢谢

Answer 1

第 0 课:使用 ESLint或类似的工具来检查您的代码是否存在微不足道的错误，然后再在 SO 和/或调试工具中度过不眠之夜。

第 1 课:本地化变量。

您的问题在于变量i是全局的 - 因此被您的全局代码和selectPage函数重用。后者将其值设置为 tabs.length，提前结束循环。

只需在每个 for 表达式中将 i = 0 替换为 var i = 0 即可。