루프 외부에서 코드가 처음 실행됩니다.

Question

버튼을 클릭하면 6 개가 무작위로 선택되고 배경색이 검정색으로 변경된 12 개의 색이 지정된 사각형이 있습니다.

사각형을 모두 색이 동시에 바뀌 었습니다. 문제를 해결했지만 setTimeout 함수를 추가 할 때까지 하나의 루프가 발생했습니다. 즉, 루프 외부의 코드가 루프 이전에 실행 중이므로 재설정 기능과 경고가 호출됩니다.

for (var i = 0; i < 6;i++) 
{ 
setTimeout(function() 
{ 
    var rand = arr[Math.floor(Math.random() * arr.length)];  
    var square = document.getElementById('square' + rand); 
    square.style.background="black"; 
},1000 * i); 
} 

Reset() 
alert("Reset function") 

나는 setTimeout 함수가 어떻게 든이 문제를 일으킨다는 것을 알았습니다. 이것을 해결할 방법이 있습니까?

감사합니다.

Answer 1

:

var length = 6; 

for (var i = 0; i < length ; i++) 
(function (i) { 
    setTimeout(function() { 
     var rand = arr[Math.floor(Math.random() * arr.length)]; 
     var square = document.getElementById('square' + rand); 
     square.style.background = "black"; 
     if (i === length - 1) Reset(); 

    }, 1000 * i); 
})(i); 


function Reset() { 
    alert("Reset function") 
} 

Answer 2

내가 추측해야한다면 오류는 for 루프 주위에없는 중괄호가 없기 때문에 발생한다고 말할 수 있습니다. 에서는 setTimeout 전에와 루프의 마지막 부분 후에이 있어야한다 {또는} 문제가 해결됩니다 클로저를 사용