setInverval只运行一次

Question

我的setInterval有问题。 我正在研究一些新闻，它每隔x秒显示一下新闻。 我正在使用setInterval 。

我的问题如下：我在函数内设置了一个区间。 加载DOM时，我运行该功能。 函数内部的间隔开始运行。
当我在区间内放置类似警报或日志的内容时，一切都很好。 但是当我在其中放入其他东西时，间隔只运行一次。
这是整个功能：

var initNews = function () {
    var captions = $('#newsContainer').find('.newsCaptionContainer .caption'),
        newsImages = $('#newsContainer').find('.newsImageContainer .newsImage'),
        newsCount = captions.length,
        selectedNews = $('#newsContainer').find('.newsCaptionContainer li.selected'),
        firstNews = captions.first();

    var triggerNextNewsitem = function () {
        if((selectedNews.prev().index() + 1) == newsCount) {
            firstNews.trigger('click');
        }  else {
            selectedNews.next().trigger("click");
        }
    };
     var interval = setInterval(triggerNextNewsitem, 5000);

    captions.on('click', function () {
        if($(this).hasClass('selected')) {
            return;
        } else {
            captions.removeClass('selected');
        }
        $(this).addClass('selected');
    });

    $('#newsContainer').on('mouseover', function () {
        clearInterval(interval);
        console.log('Interval disabled');
    }).on('mouseleave', function () {
        setInterval(triggerNextNewsitem, 5000)
        console.log('Interval enabled');
    });
};

基本上，我有几个div与类“标题”。 第一个div默认为“选中”类（在我的html doc中给出）。 必须每隔5秒运行一次间隔以查找下一个div.caption并且必须单击该间隔以显示新的newsitem（该间隔仅执行一次）。 当#newsContainer悬停时，间隔停止，因此下一个newsitem将不会自动显示。 间隔与警报或其他东西一起使用。
有谁知道为什么这个代码会发生这种情况？

欢迎提示我如何改进代码（我在jQuery / Javascript中不是那么好。：P
提前致谢。

Answer 1

您的triggerNextNewsitem()在initNews()函数内运行。 变量captions和firstNews等在initNews之前在initNews中声明，因此每次运行triggerNext时，它都会触发单击同一元素。 更改您的triggerNextNewsitem以便您每次都选择要单击的元素。 即

var triggerNextNewsitem = function () {

    var captions = $('#newsContainer').find('.newsCaptionContainer .caption'),
    firstNews = captions.first(),
    $('#newsContainer').find('.newsCaptionContainer li.selected');

    if((selectedNews.prev().index() + 1) == newsCount) {
        firstNews.trigger('click');
    }  else {
        selectedNews.next().trigger("click");
    }
};

Answer 2

您清除了间隔，但是从未将其再次设置回interval变量。

$('#newsContainer').on('mouseover', function () {
    clearInterval(interval);
    console.log('Interval disabled');
}).on('mouseleave', function () {
    interval = setInterval(triggerNextNewsitem, 5000)
    console.log('Interval enabled');
});

http://jsfiddle.net/kvrb562f/2/

Answer 3

如果没有重建代码，它就像你第二次'setInterval'那样，你没有将它分配给'interval'变量。

尝试像这样修改你的代码：

$('#newsContainer').on('mouseover', function () {
    clearInterval(interval);
    console.log('Interval disabled');
}).on('mouseleave', function () {
    interval = setInterval(triggerNextNewsitem, 5000)
    console.log('Interval enabled');
});

（在setInterval语句之前添加'interval ='）

Answer 4

我认为这段代码会有很多帮助。

 interval = setInterval(function(){triggerNextNewsitem, 5000});