Question

我注意到一种我无法解释的行为。我确信它必须是我对JQuery / JavaScript的有限知识。

当我在网页上运行以下代码时，一切都按预期工作 - 背景图像旋转：

//background image rotator
var imgArr = new Array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');
var preloadArr = new Array();
var i;

/* preload images */
for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 1;
var intID = setInterval(changeImg, 5000);

function changeImg() {
    $('#homeDiv').css({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' });
}

但是，如果我将.css()函数替换为.animate()，就像在下面的代码中一样，currImg++似乎会增加2并加载不正确的图像。

//background image rotator
var imgArr = new Array('/images/1.jpg', '/images/2.jpg', '/images/3.jpg');
var preloadArr = new Array();
var i;

/* preload images */
for (i = 0; i < imgArr.length; i++) {
    preloadArr[i] = new Image();
    preloadArr[i].src = imgArr[i];
}

var currImg = 1;
var intID = setInterval(changeImg, 5000);

function changeImg() {
    $('#homeDiv').animate({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' }, 1000);
}

归因于setInterval进程由于animate()函数耗时1000毫秒而导致'不同步'？

由于

亚历

Answer 1

删除setInterval并编写如下代码

function changeImg() {
$('#homeDiv').delay(5000).animate({ 'background': 'url(' +  preloadArr[currImg++ % preloadArr.length].src + ')' }, 1000, function() { changeImg();} );
}

就像你说的那样，setInterval与animate函数异步。每当chaneImg完成执行时，它就会再次作为回调函数运行。

在JQuery中的setInterval（）函数调用中的背景图像css animate（）

1 个答案: