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和＃34;标题＆＃34;。第一个div有类＆＃34;选择＆＃34;默认情况下（在我的html doc中给出）。必须每隔5秒运行一次间隔以找到下一个div.caption，并且必须单击该间隔以显示新的newsitem（该间隔仅执行一次）。当#newsContainer悬停时，间隔会停止，以便下一个新站点不会自动显示。间隔与警报或其他东西一起使用有谁知道为什么这个代码会发生这种情况？

欢迎提示我如何改进代码（我在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");
    }
};

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

如果没有重建代码，它就像第二次时间一样，你可以设置InterInterval＆＃39;你没有把它分配到＆＃39;间隔＆＃39;变量

尝试修改您的代码：

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

（在setInterval语句之前添加＆＃39; interval =＆＃39;）

Answer 4

我认为这段代码会对你有所帮助。

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

setInterval只运行一次

4 个答案: