for 루프 내부의 함수 호출은 루프를 끊습니다.

Question

저는 실험을하고있는 작은 피들을 가지고 있으며 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); 
    }); 
} 
// 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

감사에 대한 링크입니다 : 그것이 작동되도록하기 위해이 작업을 수행하는 데 결국,

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

그러나 : 기본적으로, 처음에 나는이 일을 원했다 사전에 도움을 줘, 나는 여기에 근본적인 무언가가 있다는 것을 느낀다. Thanks

Answer 1

Lesson 0 : 잠깐의 밤을 SO 및/또는 디버깅 도구에 사용하기 전에 간단한 코드 오류를 확인하기 위해 ESLint 또는 비슷한 도구를 사용하십시오.

1 단원 : 변수 지역화.

변수가 글로벌 변수 i이므로 전체 코드와 selectPage 함수에 의해 재사용됩니다. 후자는 값을 tabs.length으로 설정하여 루프를 조기에 종료합니다.

각 for 표현에서 i = 0을 var i = 0으로 바꿉니다.

Answer 2

let 변수를 사용하여 x 변수를 선언 해보십시오.

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