ClearInterval doesn't work

Question

Could somebody explain me why the clearInterval call doesn't work?

 $(function() {
     var width = 720;
     var animationSpeed = 2000;
     var currentSlide = 1;
     var $slider = $("#slider");
     var $slideContainer = $slider.find('.slides');
     var $slides = $slideContainer.find('.slide')
     var intervalID = function() {
         if (currentSlide === $slides.length) {
             for (currentSlide = 1; currentSlide < $slides.length; currentSlide++) {
                 $slideContainer.animate({
                     "margin-left": '+=' + width
                 }, animationSpeed).delay(1000);
             }
         }
         if (currentSlide = 1) {
             for (currentSlide = 1; currentSlide < $slides.length; currentSlide++) {
                 $slideContainer.animate({
                     'margin-left': '-=' + width
                 }, animationSpeed).delay(1000);
             }
         }
     };

     function startSlider() {
         setInterval(intervalID);
     }

     function stopSlider() {
         clearInterval(intervalID);
     }
     $slider.on('mouseenter', stopSlider).on("mouseleave", startSlider);
     startSlider();
     `enter code here`
 });

Answer 1

You need to capture the return value of setInterval and feed that to clearInterval .

var intervalId = setInterval(fn, duration);
clearInterval(intervalId);