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 を試しましたが、多くのことを試しましたが、成功しませんでした。どんな助けでも感謝します。

デモ