setInverval runs only once

Question

I have a problem with my setInterval. I am working on somesort of news thingy which shows the next news item every x seconds. I am using a setInterval for that.

My problem is the following: I have set an interval inside a function. When the DOM is loaded, I run that function. The interval, inside the function, starts to run.
When I put something like an alert or a log inside the interval, everything is just fine. But when I put something else in it, the interval only runs once.
This is the the whole function:

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

Basically, I have a few divs with the class "caption". The first div has the class "selected" by default (given inside my html doc). The interval has to be ran every 5 seconds to find the next div.caption and that one has to be clicked to show a new newsitem (the interval only does this once). When #newsContainer is hovered, the interval stops so the next newsitem won't show automatically. The interval works with an alert or something.
Does anyone know why this is happening with this code?

Tips are welcome how I can improve the code (I am not that good in jQuery/Javascript. :P
Thanks in advance.

Answer 1

Your triggerNextNewsitem() is running inside the initNews() function. Variable captions and firstNews etc. are declared inside the initNews before triggerNext, so every time triggerNext is run, it triggers click on the same element. Change your triggerNextNewsitem so you select the element to click every time. ie

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

You clear the interval but you never set it again back to interval variable.

$('#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

Without rebuilding the code it looks like the second time you 'setInterval' you're not assigning it to the 'interval' variable.

Try modifying your code like this:

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

(Add 'interval =' before the setInterval statement)

Answer 4

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

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