gpt4 book ai didi

javascript - 将代码重写为递归回调后,jQuery .fadeIn() 和 .fadeOut() 回调无法正常工作

转载 作者:行者123 更新时间:2023-11-29 14:54:26 24 4
gpt4 key购买 nike

重写的代码应该显示任意数量的图片,而旧代码是静态的。但新代码所做的是立即显示阵列的最后一张图像,并因此将所有图像全部延迟 30 秒。

我的旧代码看起来像这样并且与 jquery 回调一起工作得很好。 http://pastebin.com/XH2aRqBh

重写后的代码:

//Class Trial
Trial = (function() {
function Trial(imageArray) {
this.images = imageArray;
}

Trial.prototype.startTrial = function() {
$("#noise").hide(0, this.showImages(this.images));
};

Trial.prototype.showImages = function(imageArray) {
imageToShow = imageArray.pop();
if(imageToShow === undefined){
$("#noise").show(0);
console.log("show noise");
return;
}
console.log("pop image : ", imageToShow.image.src, " delay : ", imageToShow.delay);
$("#img").show();
$("#img").attr("src", imageToShow.image.src);
$("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, this.showImages(imageArray));
};

return Trial;

})();

//create objects and run a Trial
image0 = new AMPImage("img/image0.jpg", 10000);
image1 = new AMPImage("img/image1.jpg", 500);
image2 = new AMPImage("img/image2.jpg", 100);
image3 = new AMPImage("img/image3.jpg", 10);
image4 = new AMPImage("img/image4.jpg", 500);
image5 = new AMPImage("img/image5.jpg", 100);
image6 = new AMPImage("img/image6.jpg", 10000);
myImageArray = [image6, image5, image4, image3, image2, image1, image0];
trial1 = new Trial(myImageArray);
trial1.startTrial(myImageArray);

和 HTML 文件

<!DOCTYPE html>

<html>
<script src="jquery.js"></script>
<body>

<div id="flick">

<img id="noise" src="noise2d.png" style="display: ; height: 400px; width: 400px;" class="flickImg">

<img id="img" src="" style="display: none ; height: 400px; width: 400px;" class="flickImg">


</div>

</body>
<script src="snippet.js"></script>
</html>

JavaScript 控制台输出:

pop image :  file:/// ... /img/image0.jpg  delay :  10000 snippet.js:41
pop image : file:/// ... /img/image1.jpg delay : 2000 snippet.js:41
pop image : file:/// ... /img/image2.jpg delay : 2000 snippet.js:41
pop image : file:/// ... /img/image3.jpg delay : 2000 snippet.js:41
pop image : file:/// ... /img/image4.jpg delay : 2000 snippet.js:41
pop image : file:/// ... /img/image5.jpg delay : 2000 snippet.js:41
pop image : file:/// ... /img/image6.jpg delay : 10000 snippet.js:41
show noise snippet.js:38
undefined

最佳答案

问题是您没有在此行中传递函数。你实际上调用了 this.showImages:

$("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, this.showImages(imageArray));

您需要传递一个匿名函数,该函数在调用时执行 this.showImages:

var self = this;
$("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, function() {
self.showImages(imageArray);
});

而且我认为您还需要删除行 $("#img").show();

关于javascript - 将代码重写为递归回调后,jQuery .fadeIn() 和 .fadeOut() 回调无法正常工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20197553/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com