Вызов 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 необходимо передать функцию для вызова интервала. Заменить, что с этим:

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

bind нужен, так что this сохраняется при setInterval называет.