Question

我正在尝试在javascript中创建一个函数，使用jquery从ul中的一堆li中获取图像src的列表（不幸的是他们无法在后端更改这个），并且我试图替换某个图像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

问题是你以后会触发匿名函数，因此i变量将是for循环完成后的变量。您需要在函数中包含的每次迭代中创建i变量的副本。我使用bind：

这样做了

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");

Answer 2

就个人而言，我根本不会循环。我会设置我的计时器，每次调用函数时递增索引。

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

延迟for循环而不是迭代的问题

2 个答案: