javascript - Unable to clearInterval(); -

im working setinterval, cant seem clear. im wholly unsure of why might be:

function slider(element) {      this.i = 0;      this.element = element;      var self = this;      this.timer = window.setinterval(function() {         console.log(self.timer);         switch (self.i) {             case 0:                 element.velocity({ translatex: "-33.333333%" }, { duration: 750, delay: 4000}, "easeout");                 $('.multi-nav .active').removeclass("active");                 $('.multi-nav .0').addclass("active");                 self.i++;             break;             case 1:                 element.velocity({ translatex: "-66.666666%" }, { duration: 750, delay: 4000}, "easeout");                 $('.multi-nav .active').removeclass("active");                 $('.multi-nav .1').addclass("active");                 self.i++;             break;             case 2:                 element.velocity({ translatex: "0%" }, { duration: 750, delay: 4000}, "easeinquart");                 $('.multi-nav .active').removeclass("active");                 $('.multi-nav .2').addclass("active");                 self.i = 0;             break;         }     }, 5000); }  slider.prototype.stop = function() {   window.clearinterval(this.timer);   console.log(this.timer); }  var id = 0; var name = "slider_"; $(".multi").each( function(){     uniquename = name + id;     window[uniquename] = new slider($(this));     id++; });   $(".multi-nav a").click(function(e){     e.preventdefault();      // stopping object running on object.     var id = $(this).parent().attr("class").split(" ").pop();     uniquename = name + id;     window[uniquename].stop(); }); 

the parent element of element thats being clicked on, contains relevant number class. im grabbing , attaching name in order object.

my issue seems how i'm trying stop it. if go browser, , utilize proper name object, , try , .stop(); it, nothing happens. if use object name , .timer it, random number.

any idea how can intervals clear?

---

update

after bit more experimentation, appears though if manually stop both objects, both stop. if 1 stopped, animation continues both. idea why case?

---

i've played alternative html there's 1 slider, , works expected. there 2 or more however, sliders must have .stop() method run before of them stop, , in case, of them do. not intention.

---

update 2

it appears within same html structure, if trigger click event on both matching sets, defined within .each() loop, setinterval end, both. why it wont end individual object?

try declaring timer handler globally.

var timer = null;    function slider(element) {      this.i = 0;      this.element = element;      var self = this;      timer = window.setinterval(function() {      console.log(timer);      switch (self.i) {        case 0:          element.velocity({            translatex: "-33.333333%"          }, {            duration: 750,            delay: 4000          }, "easeout");          $('.multi-nav .active').removeclass("active");          $('.multi-nav .0').addclass("active");          self.i++;          break;        case 1:          element.velocity({            translatex: "-66.666666%"          }, {            duration: 750,            delay: 4000          }, "easeout");          $('.multi-nav .active').removeclass("active");          $('.multi-nav .1').addclass("active");          self.i++;          break;        case 2:          element.velocity({            translatex: "0%"          }, {            duration: 750,            delay: 4000          }, "easeinquart");          $('.multi-nav .active').removeclass("active");          $('.multi-nav .2').addclass("active");          self.i = 0;          break;      }    }, 5000);  }    slider.prototype.stop = function() {    window.clearinterval(timer);    console.log(timer);  }    var id = 0;  var name = "slider_";  $(".multi").each(function() {    uniquename = name + id;    window[uniquename] = new slider($(this));    id++;  });      $(".multi-nav a").click(function(e) {    e.preventdefault();      // stopping object running on object.    var id = $(this).parent().attr("class").split(" ").pop();    uniquename = name + id;    window[uniquename].stop();  });