javascript - 从函数内调用 setInterval

Question

我正在制作一个 slider ，但遇到了问题。我正在练习模块化 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，以便在setInterval 调用它时保留this。