javascript - 变量在函数中设置为未定义

Question

这个问题已经有答案了:

How to use "setTimeout" to invoke object itself (3 个回答)

已关闭 7 年前。

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

它工作得很好，直到我输入 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 上下文就是 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);