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调用mvn release:prepare时保留/surveys/{id}/responses/bulk。

从函数内部调用setInterval

1 个答案: