이 함수에서 setTimeout이 작동하지 않는 이유는 무엇입니까?

Question

탭을 생성하는 함수를 만들었습니다. 요소 ID를 매개 변수로 사용하여 작동 한 다음 이벤트 리스너를 생성 한 다음 모든 요소의 클릭 이벤트에 응답합니다. 그것은 조금 복잡, 그래서 난 그냥 그것을 게시합니다 :

function toggleTabs() { 
    var panel = [], li = []; 
    for(var i = 1, j = arguments.length; i <= j; i++) { 
    li[i] = document.getElementById(arguments[i - 1]); 
    panel[i] = 'panel' + i; 
    } 
    document.getElementById('toggle').addEventListener('mouseup', function(event) { 
    var target = event.target.id; 
    for(var i = 1, j = li.length; i <= j; i++) { 
     if(li[i].id === target) { 
     document.getElementById(panel[i]).style.display = 'block'; 
     setTimeout(function() { 
      document.getElementById(panel[i]).style.opacity = '1'; 
      window.alert('fired'); 
     }, 500); 
     li[i].className = 'active'; 
     } else if(target.substring(0,3) === 'tab'){ 
     document.getElementById(panel[i]).style.display = 'none'; 
     document.getElementById(panel[i]).style.opacity = '0'; 
     li[i].className = null; 
     } 
    } 
    }, false); 
} 
if(url === '/customers') { toggleTabs('tab-c-featured', 'tab-c-view'); } 

그대로, 그것은 작동하지만, 나는 그것이 기존 초래 전환에도 불구하고 발생하지 않는, 트리거 될 때 요소가 페이드 할 요소에. 이것은 디스플레이 속성이 변경되어 페이드 인 불투명도 효과를 재정의했기 때문에 타임 아웃 효과를 추가하기로 결정했으나 작동하지 않습니다. 나는 그것을 테스트하기 위해 윈도우 경고를 추가했으며, 어떤 이유로 화재가 발생하지 않았는데, 왜 그런가요?

감사합니다.

Answer 1

오류가있을 수 있습니다. 싸이클 내부에서 지연 함수 호출을 만들 때 클로저를 사용해야합니다. 그래서 여기에 실수 함수가 호출됩니다 document.getElementById(panel[i]).style.opacity = '1';

입니다 panel[i] 의지는 panels리스트의 마지막 요소를 의미합니다. 이 동작이 발생하지 않도록하려면 통화를 닫음으로 감 쌉니다 (예 :
setTimeout(function (thePanel) { return function(){ // do whatever you need with thePanel } }(panel[i]), 500);

There is more info about this problem at SO