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

我注意到一种我无法解释的行为。 我确信它必须是我对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 + ')' }); } 

但是，如果我用.animate()替换.css()函数，就像在下面的代码中一样， 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每次完成自身时都会再次作为回调函数运行。