Выполнение кода внешнего цикла

Question

У меня есть 12 цветных квадратов, которые при нажатии кнопки выбираются случайным образом, а цвет фона изменен на черный.

Все квадраты меняли цвет одновременно, пока я не добавил функцию setTimeout, которая исправила эту проблему, но вызвала другую - код цикла за циклом выполняется до цикла, то есть вызывает функцию Reset и предупреждение.

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 и после последней части вашего цикла должно быть {или}