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，但我尝试过但很多都没有成功。任何帮助都会得到满足。

demo

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/

单击按钮时重置间隔

1 个答案: