jQuery .fadeIn（）和.fadeOut（）在将代码重写为递归回调之后，回调的工作不如预期 [英] jQuery .fadeIn() and .fadeOut() Callbacks work not as expected after rewriting code to recursive callbacks
问题描述
重写的代码应显示任意数量的图片，旧代码是静态的。
但是，新代码的作用是立即显示数组的最后一个图像，并显示所有图像的完整延迟，因此30秒。
The rewritten code should display any amount of pictures and the old code is static. But what the new code does is to show instantly the last image of the array and for the full delay of all images together therefore 30 seconds.
我的旧代码看起来像这样，并与jquery回调很好。
http://pastebin.com/XH2aRqBh
My old code looks like this and worked well with the jquery callbacks. 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控制台输出：
The JavaScript Console Output:
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 ：
The problem is that you don't pass a function in this line. You actually call this.showImages:
$("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, this.showImages(imageArray));
你需要传递一个匿名函数，当被调用时执行 this.showImages ：
You need to pass an anonymous function, which when called executes this.showImages:
var self = this;
$("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, function() {
self.showImages(imageArray);
});
我想你还需要删除 $ ）.show（）; 。
这篇关于jQuery .fadeIn（）和.fadeOut（）在将代码重写为递归回调之后，回调的工作不如预期的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
