Question

我的想法是显示阵列中的所有图像。首先，噪声图像被隐藏后，它调用showArray（）函数来显示数组中的图像。

Trial = (function() {
  function Trial(imageArray) {
    this._images = new Array();
    this._images = imageArray;
  }

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

  Trial.prototype.showImages = function() {
    var imageToShow;
    imageToShow = this._images.pop();
    if (imageToShow === void 0) {
      $("#noise").show;
      return;
    }
    $("#img").attr("src", imageToShow.src);
    return $("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, showImages());
  };

  return Trial;

})();

image1 = new AMPImage("someImage1.png", 500);  //imagePath, delay in ms
image2 = new AMPImage("someImage2.png", 750);
image3 = new AMPImage("someImage3.png", 1000);

myImageArray = [image1, image2, image3];
trial1 = new Trial(myImageArray);
trial1.startTrial();

但在执行startTrial（）时，我收到错误消息

ReferenceError：未定义showArray

Answer 1

根据您的最新修改：

上下文不是那样的。即showImages不是变量。它是Trial类原型的一种方法。如果你想从外部代码调用它，你可以这样做：

myTrial.showImages();

如果要从Trial类中的其他方法调用它，则必须将其作为当前实例上的方法。您可以将当前实例的引用作为this。即。

this.showImages();

而不是

showImages();

你真正想要做的是不立即调用该函数，你想要在动画结束后调用该函数。为此，您将该函数作为值传递给动画方法。只需省略()即可传递函数。

这个问题是this上下文是一个变幻无常的野兽，如果你那样做是不正确的。要保持正确的this上下文，您必须绑定它：

var showImagesToCallLater = this.showImages.bind(this);

// some time later, perhaps inside another method you can then do:

showImagesToCallLater();

// and this will have the correct `this` context.

因此，对于我们的示例，我们需要.hide(0, this.showImages.bind(this));和.fadeOut(0, this.showImages.bind(this));

附加代码审查

我已经审核了您的其余代码，建议您可能要进行其他更改。如果您只是想让代码尽快运行，您可能会忽略这一点：

// There's no need to create an extra closure here,
// we can remove a level of nesting.
function Trial(imageArray) {
  // There's no point writing to `this._images` then immediately
  // overwriting, so we only write to it once here
  this._images = imageArray;
}

Trial.prototype.startTrial = function() {
  // I assume you want to begin showing images once #noise is hidden.
  // To do this, pass a function to hide.
  return $("#noise").hide(0, this.showImages.bind(this));
};

Trial.prototype.showImages = function () {
  var imageToShow;
  imageToShow = this._images.pop();
  if (imageToShow === void 0) {
    // You need to actually call this function
    $("#noise").show();
    return;
  }
  $("#img").attr("src", imageToShow.src);
  // Once one image has been shown, I'm guessing you want to show the next.
  // to do this, we `.bind` the function so it has the correct `this` value.
  return $("#img").fadeIn(0).delay(imageToShow.delay)
                  .fadeOut(0, this.showImages.bind(this));
};

image1 = new AMPImage("someImage1.png", 500);  //imagePath, delay in ms
image2 = new AMPImage("someImage2.png", 750);
image3 = new AMPImage("someImage3.png", 1000);

myImageArray = [image1, image2, image3];
trial1 = new Trial(myImageArray);
trial1.startTrial();

不是调用使其立即执行的函数，而是希望它在动画结束时执行。为此，您需要传递实际函数，因此请在函数上调用.bind(this)。这样它将在正确的上下文中执行。

您也可以构建一个更“实用”的版本：

function startTrial(imageArray) {
  // note how we pass the function showImage, we don't call it
  $("#noise").hide(0, showImage);
  function showImage() {
    var imageToShow = imageArray.pop();
    if (imageToShow === undefined) {
      $("#noise").show();
      return;
    }
    $("#img").attr("src", imageToShow.src);
    return $("#img").fadeIn(0).delay(imageToShow.delay).fadeOut(0, showImage);
  }
}
var image1 = new AMPImage("someImage1.png", 500);  //imagePath, delay in ms
var image2 = new AMPImage("someImage2.png", 750);
var image3 = new AMPImage("someImage3.png", 1000);

var myImageArray = [image1, image2, image3];
startTrial(myImageArray);

您喜欢哪种款式非常符合个人品味。功能版本可以让您忘记所有奇怪的this绑定行为。

JavaScript递归回调函数 - ReferenceError：未定义函数

1 个答案:

附加代码审查