javascript - Multiple instances of Setinterval -

i have little problem code.

i have setup default, rotating fadein fadeout slider auto playing, , when user clicks on li, jump 'slide' , pause slider x amount of time.

the problem have if user clicks on multiple li's fast, run color1() multiple times start colorinterval multiple times. gives undesired effect.

so need with, figuring out how reset code each time li clicked, whenever colorclick clicked, want make sure there no other instances of colorinterval before start new one.

thanks in advance!

=================================

edit: have problem, believe fixed clearinterval problem, if @ var reset, you'll see runs color1() each time li clicked, runs multiple intervals, need delete previous instance of color1() each time called, make sure doesnt repeat code inside multiple times. when li clicked delete instances of color1()

or

i need instead of running color1 in var reset, go straight colorinterval instead of running color1() each li clicked,

so run colorinterval after x amount of time in var reset.

function color1() {   var pass = 0;   var counter = 2;   var animationspeed = 500;    var $colorcontent = '.color-container-1 .color-content-container'    var $li = '.color-container-1 .main-color-container li'    $($li).on('click', function() {     colorclick($(this));   });    function colorclick($this) {     var $getclass = $this.attr("class").split(' ');     var $whichnumber = $getclass[0].substr(-1);     var $parent = '.color-container-1 ';      pass = 1;     $($colorcontent).fadeout(0);     $($colorcontent + '-' + $whichnumber).fadein(animationspeed);      var reset = settimeout(function() {       cleartimeout(reset);       pass = 0;       color1();     }, 10000);   }      var colorinterval = setinterval(function() {      if (pass > 0) {       clearinterval(colorinterval);       return; //stop here doesn't continue execute below code     }      $($colorcontent).fadeout(0);     $(($colorcontent + '-' + counter)).fadein(animationspeed);     ++counter      if (counter === $($colorcontent).length + 1) {       counter = 1;     }    }, 7000); } 

you clear interval inside of click event.

var colorinterval; $($li).on('click', function() {     clearinterval(colorinterval);     colorclick($(this)); });  //your other code  colorinterval = setinterval(function() { //rest of code });