Question

我正在尝试创建幻灯片放映，在完成当前幻灯片之前加载下一张幻灯片。我有两个原型。一个用于显示当前幻灯片，另一个用于加载下一张幻灯片。

它工作正常，直到我在幻灯片之间放置setTimeout()延迟。 NextSlide()函数在setTimeout()之后调用自身，但this.nextSlide未定义，即使它已加载并this.nextSlide成功添加到LoadNextSlide()。

$(document).ready(function(){
    //Set width and height of canvas
    var width = $(document).width();
    var height = $(document).height();
    $("#MKslide").css({"width":width+"px","height":height+"px"});


    slideShow = new SlideShow(width, height, "2d");
    slideShow.LoadNextSlide(null);
    slideShow.NextSlide();
});

function SlideShow(canvasWidth, canvasHeight, dimension){
    //Creating the slideshow
}

SlideShow.prototype.LoadNextSlide = function(currentSlideNumber){

    var data = $.parseJSON($.ajax({
        type: "POST",
        url: "/cms/php/request.php",
        dataType: "json",
        data: {slideNumber : currentSlideNumber},
        async: false
    }).responseText);
    this.nextSlide = data;
    alert(this.nextSlide.id);
}

SlideShow.prototype.NextSlide = function(){
    alert(this.nextSlide.id);
    this.currentSlide = this.nextSlide; //Swap to next slide.
    if(beginsWithHTTP(this.currentSlide.data)){
        this.image.src = this.currentSlide.data;
    }
    else{
        this.image.src = "http://" + this.currentSlide.data; //Set the current slide.
    }
    this.LoadNextSlide(this.currentSlide.id); //Preload next slide
    window.setTimeout(this.NextSlide,this.currentSlide.duration * 1000);//wait x seconds before swapping
}

Answer 1

按如下方式添加bind(this)：

window.setTimeout(this.NextSlide.bind(this),this.currentSlide.duration * 1000);

setTimeout计划稍后执行的函数，此时执行它的上下文将始终是全局对象（window），而不是您的对象。这个背景是this所指的。 bind方法会为您的方法创建一个新的引用，该引用将覆盖此行为，并始终将this设置为您传递给bind的内容，而不管它从中调用的上下文

另一种不太优雅的解决方案是传递setTimeout一个匿名函数，在该函数中从对象的上下文中显式调用该方法：

var that = this; // keep a reference to your object
window.setTimeout(function () {
    that.NextSlide(); // use the reference to your object
}, this.currentSlide.duration * 1000);

Answer 2

您可以使用.bind或asign self = this并使用self.nextslide调用匿名函数，它与范围有关。您也可以使用下划线绑定，因为它也可以充当polyfill。

变量在函数中设置为undefined

2 个答案: