jQuery .fadeIn() and .fadeOut() Callbacks work not as expected after rewriting code to recursive callbacks

问题

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.

My old code looks like this and worked well with the jquery callbacks. http://pastebin.com/XH2aRqBh

The rewritten code:

//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);

And the HTML File

<!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>

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

回答1:

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));

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);
});

And I think you also need to remove the line $("#img").show();.

来源：https://stackoverflow.com/questions/20197553/jquery-fadein-and-fadeout-callbacks-work-not-as-expected-after-rewriting-c

标签

javascript

jquery

callback

delay