Проблема с задержкой для цикла, не повторяющейся

Question

Я пытаюсь создать функцию в javascript, которая использует jquery, чтобы захватить список изображений src из группы li в ul (к сожалению, они не могут изменить это в backend), и im пытаясь заменить определенное изображение src каждые несколько секунд одним из списка.

Я пробовал использовать jQuery delay(), functionTimeout и некоторые другие вещи, и я не могу заставить его работать.

Кто-нибудь знает, почему это не работает, или знаете лучший способ сделать это?

function sponsorRotator(sponsorImg, sponsorUl) { 
var ulLength = $(sponsorUl + " li").length; 
for (var i=0;i<ulLength;i++) { 
    setTimeout(function() { 
     var imgSrc = $(sponsorUl + " li").eq(i+1).children("img").attr("src"); 
     $(sponsorImg).attr('src',imgSrc); 
     console.log(i); 
    }, 1000); 
} 
} 

sponsorRotator("#image", "#list"); 

У меня есть код на JSFiddle http://jsfiddle.net/pPe3u/1/

Answer 1

Лично я бы не стал петлять вообще. Я бы поставил свой таймер так, увеличивая индекс при каждом вызове функции.

function sponsorRotator(sponsorImg, sponsorUl) { 
    var ulLength = $(sponsorUl + " li").length; 
    var i = - 1; 
    var timer = function (i) { 
    var imgSrc = $(sponsorUl + " li").eq(i).children("img").attr("src"); 
    $(sponsorImg).attr('src', imgSrc); 
    setTimeout(function() { 
     i = (i === ulLength - 1) ? 0 : i + 1; 
     timer(i); 
    }, 1000); 
    }; 
    timer(i); 
} 

sponsorRotator("#image", "#list"); 

Fiddle.

Answer 2

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

function sponsorRotator(sponsorImg, sponsorUl) { 
var ulLength = $(sponsorUl + " li").length; 
for (var i=0;i<ulLength;i++) { 
    setTimeout(function(i) { // i passed as parameter 
     var imgSrc = $(sponsorUl + " li").eq(i+1).children("img").attr("src"); 
     $(sponsorImg).attr('src',imgSrc); 
     console.log(i); 
    }.bind(null,i), 1000); // bind magic 
} 
} 

sponsorRotator("#image", "#list");