[英]JavaScript Recursive Callback Function - ReferenceError: function is not defined
我的想法是显示阵列中的所有图像。 首先,Noise图像在此之后被隐藏,它调用showArray()函数以显示Array中的图像。
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未定义
根据您的最新编辑:
上下文不是那样工作的。 即showImages
不是变量。 这是Trial
类的原型上的一种方法。 如果要从外部代码调用它,可以执行以下操作:
myTrial.showImages();
如果要从Trial
类中的另一个方法调用它,则必须在当前实例上将其作为方法调用。 您可以像this
获得对当前实例的引用。 即
this.showImages();
代替
showImages();
但是,您实际上不希望立即调用该函数,而是希望动画结束后立即调用该函数。 为此,请将函数作为值传递给animation方法。 只需省略()
,您将传递该函数。
问题在于, 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
绑定行为。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.