関数内からsetIntervalを呼び出す

Question

私はスライダーを作っていて、問題に遭遇しました。私はモジュラーjsを練習していますが、このコードは初めて正常に動作しますが、setIntervalはそれ自体を繰り返さないので、スライドが変わり続けることはありません。それを動作させるには？前もって感謝します。

var currentSlide = 1; 
var slider = { 

    init: function(){ 
     this.cacheDom(); 
     this.setInt(); 
    }, 
    cacheDom: function(){ 
     this.$panel = $('.slider'); 
     this.$actPan = this.$panel.find('.panel.active'); 
    }, 
    setInt: function(){ 
     return setInterval(this.mainFunction(), 3000); 
    }, 
    mainFunction: function(){ 
     this.$actPan.fadeOut(2000, this.showNextPanel()); 
     this.$panel.find('.tabs li:nth-child('+ currentSlide +')').find('img').attr('src', 'images/g4228.png'); 
    }, 
    showNextPanel: function(){ 
     this.$panel.find('#panel' + currentSlide).removeClass('active'); 
     this.revert(); 
    }, 
    revert: function(){ 
     currentSlide++; 
     if(currentSlide === 4){currentSlide = 1;} 
     this.$panel.find('.tabs li:nth-child('+ currentSlide +')').find('img').attr('src', 'images/g4228.png'); 
     this.$panel.find('#panel' + currentSlide).fadeIn(2000, this.adder()); 
     }, 
    adder: function(){ 
     this.$panel.find('#panel' + currentSlide).addClass('active'); 
     } 
}; 

slider.init(); 

だから、私だけsetIntとinit機能が変化する必要があると考えています。

Answer 1

問題は、この行です：

return setInterval(this.mainFunction(), 3000); 

これはthis.mainFunction()を呼び出し、setIntervalに結果を渡しています。 setIntervalには、ある間隔で呼び出す関数を渡す必要があります。 setIntervalがそれを呼び出したときthisが保存されるように

return setInterval(this.mainFunction.bind(this), 3000); 

bindが必要とされています。これをすることを交換してください。