Ошибка передачи правильного элемента в другую функцию с помощью setTimeout

Question

Вот моя проблема:

var slide;
$$('#slides li').each(function(i, n) {
    slide = i;
    setTimeout("initiateSlide()",n * 500)                     
});
function initiateSlide(){
    i = slide;
    alert(i); // pretty much alerts the last one 5 times
}

Я ожидаю initiateSlide() с 5 различными слайдами, вместо этого я получу только последний 5 раз.

Answer 1

Ваша проблема в том, что глобальная переменная (слайд), на которую вы ссылаетесь в функции initiateSlide (), устанавливается последней на момент запуска функции. Вы, вероятно, хотите использовать замыкания для поддержания состояния переменной. Как это:

$$('#slides li').each(function(i, n) {
    setTimeout(function() { initiateSlide(i); }, n * 500)
});
function initiateSlide(i){
    alert(i);
}

Примечание. Это также полностью устраняет необходимость в глобальном

Answer 2

Я рекомендую вам избавиться от глобальных переменных и передать каждый слайд в цикле в качестве аргумента вашей функции initiateSlide:

$$('#slides li').each(function(slide, n) {
  setTimeout(function () {
    initiateSlide(slide);
  }, n * 500)                     
});

function initiateSlide(slide){
  alert(slide);
}​

В вашем примере цикл each заканчивался раньшелюбой обратный вызов setTimeout был выполнен, ваша функция initiateSlide была вызвана с использованием последнего итерированного элемента.