javascript - setInterval 只运行一次

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 文档中给出)。 间隔必须每 5 秒运行一次以查找下一个 div.caption，并且必须单击该间隔以显示新的 newsitem(间隔仅执行一次)。 当 #newsContainer 悬停时，间隔停止，因此不会自动显示下一个 newsitem。 间隔与警报或其他东西一起使用。
有谁知道为什么这段代码会发生这种情况？

欢迎提供我如何改进代码的提示(我在 jQuery/Javascript 方面不是那么好。:P
提前致谢。

Answer 1

您的 triggerNextNewsitem() 在 initNews() 函数中运行。 captions 和 firstNews 等变量在 triggerNext 之前的 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");
    }
};