復位當按鈕被點擊

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，並嘗試了很多，但無法成功。任何幫助將被appriciated。

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/