jquery - 重置单击按钮时的间隔

Question

我有以下jquery ...

jQuery(document).ready(function($){
  $('ul li').on('click', function(){
    $('ul li').removeClass('active');
    $(this).addClass('active'); 
  }); //end click
  $('ul li').first().click();
  setInterval(function(){
    var nextli = $('ul li').filter('.active').removeClass('active').next();
    nextli.addClass('active');
    if(!nextli.length){
      nextli = $('ul li').first();
    }   
    nextli.addClass('active');
  }, 5000); //end set interval
}); //end document ready

我已将间隔设置为 5 秒，因此如果我在等待 4 秒后单击列表，那么显然会在 1 秒后激活下一个列表。所以我需要重新设置间隔。我已经尝试过 clearInterval 并且我尝试了很多但无法成功。任何帮助都将不胜感激。

演示

Answer 1

您需要在单击处理程序中停止并启动间隔。该setInterval方法返回一个句柄，您可以使用它来停止它。

jQuery(document).ready(function($){

  var timer = null;

  $('ul li').on('click', function(){
    $('ul li').removeClass('active');
    $(this).addClass('active');
    if (timer != null) {
      window.clearInterval(timer);
    }
    timer = window.setInterval(function(){
      var nextli = $('ul li').filter('.active').removeClass('active').next();
      if (!nextli.length){
        nextli = $('ul li').first();
      }
      nextli.addClass('active');
    }, 5000);
  });
  $('ul li').first().click();

});

演示：http: //jsfiddle.net/aKUHR/10/