Функция тайм-аута с параметрами, которые изменяются во время выполнения

Question

Я пытаюсь следующее:

var timeout = 300;
var colors = ['aqua', 'limegreen']
for (var i=0; i < 4; ++i) {
    console.log(colors[i % colors.length]);
    setTimeout(function() { changeColor(colors[i % colors.length]) }, i * timeout);
}

function changeColor(color) {
    console.log(color);
}

Это не работает, потому что параметр для changeColor разрешается, когда он выполняется ... это означает, что цвет всегда будет одинаковым. В моем chrome также не работала передача параметров после тайм-аута:

var color = colors[i % colors.length];
setTimeout(function() { changeColor() }, i * timeout, color);

Ну, теперь у меня есть обходной путь с интервалом, который работает ... но так как я здесь, чтобы учиться ... как это сделать с таймаутом?

Answer 1

Анонимная функция, которая вызывает changeColor, будет выполнена, когда цикл уже закончится.Таким образом, оно будет равно последнему полученному значению.Чтобы предотвратить этот захват значения, которое вам нужно при закрытии, обернув вызов setTimeout анонимной функцией:

for (var i=0; i < 4; ++i) {
    console.log(colors[i % colors.length]);
    (function(i){
        setTimeout(function() { changeColor(colors[i % colors.length]) }, i * timeout);
    })(i);    
}

Answer 2

Вы страдаете от проблемы закрытия;ссылка на значение i была зафиксирована, поэтому все функции содержат одно и то же значение.Вам нужно сделать что-то подобное, чтобы захватить ссылку i в момент вызова:

 for(var i = 0; i < 4; i++)
 {
      (function(index)
      {
          setTimeout(function()
          {
              changeColor(colors[index & colors.length]);
          }, index * timeout);
      })(i)
 }