javascript 幻灯片增长更快，为什么？

Question

我的主页上有一个广告幻灯片。它由 2 个图像组成。

我预加载了这两个图像，制作了 new Image() 并为它们设置了 .src。

我有一个函数 giveNextName 返回下一张图片的名称(应该在 img 元素的 src 属性中)(我这样做，因为很快，幻灯片将包含超过 2 张图片)

所以主要代码如下:

BillBoard               = {};
BillBoard.folder        = "/pictures/cards/";
BillBoard.ext           = "png";
BillBoard.$             = $("#billboard img");
BillBoard.pics          = 2;
BillBoard.changeTime    = 7000;
BillBoard.names         = ["ad1","ad2"];
BillBoard.currentState  = 0;       
BillBoard.images        = // array of preloaded Images

(function(){
    var image, images = [];
    for (var i=0; i<BillBoard.pics; i++) {
        image = new Image ();
        image.src = BillBoard.folder+BillBoard.names[i]+'.'+BillBoard.ext;
        images.push (image);
    }
    return images;
}());

BillBoard.giveNextName = function(){/* getting the next name */};

// BillBoard change action
BillBoard.change = function(){
    BillBoard.$.fadeOut(function(){
        $(this).attr('src', BillBoard.giveNextName());
        $(this).fadeIn();
    });
}

// Starting BillBoard
window.setInterval(BillBoard.change, BillBoard.changeTime);

所以，想法很简单。使用 window.setInterval 我每 n 秒调用一次 BillBoard.change。但是，不知道为什么，billboard的变化越来越快，直到完全没有画面(fadeIn来不及执行)

我的错误在哪里？

更新。感谢 Yann Ramin 提供链接。

我不应该通过 window.setInterval 每 n 秒调用一次 BillBoard.change。相反，我应该在 fadeOut() 的回调中添加对 BillBoard.change 的调用。

我的意思是这段代码:

BillBoard.change = function(){
    BillBoard.$.fadeOut(function(){
        $(this).attr('src', BillBoard.giveNextName());
        $(this).fadeIn();
        window.setTimeout(BillBoard.change, BillBoard.changeTime);
    });
}

// simply call the change function
// it will be calling itself every n seconds
BillBoard.start = (function(){
    window.setTimeout(BillBoard.change, BillBoard.changeTime);
}());

Answer 1

查看可能的罪魁祸首:

http://www.ozonesolutions.com/programming/2011/07/jquery-fadein-window-setinterval-a-bad-combination/