переменная установлена ​​в undefined в функции

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.nextslide это о областям. Также вы можете использовать привязку подчеркивания, так как она будет действовать как полипол.