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});