setInverval работает только один раз

Question

У меня проблема с моим setInterval. Я работаю над somesort news thingy, который показывает следующий новостной материал каждые 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 имеет класс «selected» по умолчанию (данный внутри моего html-документа). Интервал должен запускаться каждые 5 секунд, чтобы найти следующий div.caption, и его нужно щелкнуть, чтобы отобразить новый информационный материал (интервал только делает это один раз). Когда #newsContainer завис, интервал останавливается, поэтому следующий файл новостей не будет отображаться автоматически. Интервал работает с предупреждением или что-то в этом роде.
Кто-нибудь знает, почему это происходит с этим кодом?

Чаевые приветствуются, как я могу улучшить код (я не так хорош в JQuery/JavaScript.: P
Спасибо заранее

Answer 1

Ваш triggerNextNewsitem() работает внутри функции initNews(). Переменные captions и firstNews и т. Д. Объявляются внутри initNews перед triggerNext, поэтому каждый раз при запуске 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

Без восстановления кода он выглядит как второй раз, когда вы '. setInterval»вы не назначая его на„интервал“переменной

Попробуйте изменить код так:.

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

(Добавить„интервал =“до setInterval состояния)

Answer 3

Вы очищаете интервал, но вы никогда не устанавливаете его снова на 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 4

Я думаю, что этот код поможет вам много.

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