javascript - How to clear a timer in setInterval function with on click trigger? -

i've wrote code:

 var timer = 0;     $('.tour-slider').on('click', 'li a', function(e){     e.preventdefault();     $(this).closest('.slider').hide();     var sliderhref = $(this).attr('href');     $(sliderhref).fadein();     if(sliderhref == '#slider-1'){         anim1.pause();         anim2.pause();         anim3.pause();         anim1.start();     }else if(sliderhref == '#slider-2'){         anim1.pause();         anim2.pause();         anim3.pause();         anim2.start();       }else if(sliderhref == '#slider-3'){         anim1.pause();         anim2.pause();         anim3.pause();         anim3.start();     } });    function slideshow(){ $('#slider-1').siblings().hide(); anim1.start(); timer = setinterval(function(){     $('.slider:visible .active').next('li').find('a').trigger('click');      $('.helper').first().removeclass('helper');     if (!$('#slider-3').hasclass('helper')) {         $('#slider-1, #slider-2, #slider-3').addclass('helper');         $('#slider-1 .active').find('a').trigger('click');         $('#slider-3').hide();     } }, 10000);  } 

as can see basic slideshow in infinity loop created setinterval.

but now, have add feature - if user click on 'a' element, setinterval timer should restart.

right now, slides change (#slider-1, #slider-2, #slider-3) in each 10sec. when user click in 'a' example after 4sec, slider change, , change once again automaticaly after 6sec.

now: (#slider-1 show > user click @ 'a' after 4sec > #slider-2 show > after 6 sec #slider-3 show )

want: (#slider-1 show > user click @ 'a' after 4sec > #slider-2 show > after 10sec #slider-3 show up)

i know, have use clearinterval, yes? dont know how use in case.

html markup:

            <div id="slider-1" class="slider helper">                  <div id="animation-1">                  </div> <!-- end animation-1 -->              <div class="tour-slider-content">                  <ul>                     <li class="active"><a href="#slider-1"></a></li>                     <li><a href="#slider-2"></a></li>                     <li><a href="#slider-3"></a></li>                 </ul>              </div> <!-- end slider content class -->              </div> <!-- end slider 1 -->             <div id="slider-2" class="slider helper">                 <div id="animation-2">                     </div> <!-- end animation-2 -->                  <div class="tour-slider-content">                      <ul>                         <li><a href="#slider-1"></a></li>                         <li class="active"><a href="#slider-2"></a></li>                         <li><a href="#slider-3"></a></li>                     </ul>                  </div> <!-- end slider content class -->              </div> <!-- end slider 2 -->              <div id="slider-3" class="slider helper">                  <div id="animation-3">                  </div> <!-- end animation 3 -->                  <div class="tour-slider-content">                       <ul>                         <li><a href="#slider-1"></a></li>                         <li><a href="#slider-2"></a></li>                         <li class="active"><a href="#slider-3"></a></li>                     </ul>                  </div> <!-- end slider content class -->              </div> <!-- end slider 3 -->          </div> <!-- end yout slider --> 

thanks in advance help.

cheers!

move function variable (give name) , remove , recall setinterval everytime need it:

timer = setinterval(do_slide, 10000);  ...  function do_slide(){     $('.slider:visible .active').next('li').find('a').trigger('click');     $('.helper').first().removeclass('helper');     if (!$('#slider-3').hasclass('helper')) {         $('#slider-1, #slider-2, #slider-3').addclass('helper');         $('#slider-1 .active').find('a').trigger('click');         $('#slider-3').hide();     } } 

then call these lines on click event:

if (timer) clearinterval(timer); timer = setinterval(do_slide, 10000);