for 루프에서 매개 변수를 전달하는 SetInterval

Question

var flag = true; 
    function changeColor (element) { 
     if(flag==true){ 
      document.getElementById(NAME+element).style.background="red"; 
      flag=false; 
     } 
     else if (flag==false){ 
      document.getElementById(NAME+element).style.background="white"; 
      flag = true; 
    } 
    } 

    var temp; 
    for(var i=0;i<elements_array.length;i++) 
    { 
     alert("VAL="+elements_array[i]); 
     temp = elements_array[i]; 

     setInterval(function() { changeColor(temp); } ,300); 
    } 

위의 코드는 마지막 값에만 적용됩니다. 정수 배열 (elements_array)에서 얻을 수있는 특정 셀의 색을 변경하려고합니다.

경고에서 배열 값이 올바르게 표시됩니다 (예 : 2,5,8). 그러나 단지 8 번째 (마지막) 색이 변하고 있습니다.

그러나 하드 코딩하면 다음과 같은 값으로 모든 셀이 색이 바뀝니다.

setInterval(function() { changeColor(2); } ,300); 
setInterval(function() { changeColor(5); } ,300); 
setInterval(function() { changeColor(8); } ,300); 

루프가 작동하지 않는 이유에 대한 아이디어가 있으십니까? 감사합니다.

Answer 1

실제로 코드는 for 루프의 모든 반복에서 동일한 temp 변수를 참조합니다. 그런 식으로 setInterval 함수의 모든 인스턴스는 동일한 참조와 따라서 동일한 값 (setInterval에 전달 된 함수 실행시)을 전달받습니다.

는 추가 함수 호출이 실제로의 복사본을 만들고,이 문제를 해결 setInterval

function createCB(val) { 
    return function(){ 
    changeColor(val); 
    }; 
} 

에 대한 콜백을 만들려면 다음 함수 같은 것을 사용하고

setInterval(createCB(temp),300); 

에 따라 당신의 setInterval 전화를 변경하려면 temp 값을 입력하면 changeColor의 각 호출에 다른 값이 전달됩니다.