SetInterval, затем clearInterval, затем setInterval снова

Question

У меня проблема с моим кодом слайдера.

Здесь я определить функцию для анимации ползунка в зависимости от того, сколько элементов есть (чем больше элементов, тем больше раз она должна скользить):

var animateSlider = function() { 

     var howManyTimes = Math.ceil(newContainerWidth/parentWidth)-1; 


     var repeatSlider = function() { 
      howManyTimes = Math.ceil(newContainerWidth/parentWidth)-1; 
      for (i=0;i<howManyTimes;i++) { 
      // looped code 
      $(".portfolio-slider").delay(2000).animate({ 
         marginLeft: - (slideDistance * (i+1)) 
        }, 500); 

      console.log(howManyTimes); 
     } 
     $(".portfolio-slider").delay(2000).animate({ 
         marginLeft: 0 
        }, 500); 
    } 

    // and this is where I set the interval for sliding: 

    var intervalId; 
    var intervalId = function() { 
     setInterval(repeatSlider,howManyTimes * 500); 
    } 
    intervalId(); 

    // here's where I tried putting: 
    // clearInterval(intervalId) 
    // just to see if it clears it, but it didn't, the code interval just kept on replaying. 

    } 

Здесь я начинаю ползунок, если автозапуск установлен правда:

// fires the slider if autoplay option is set to true 
    if (autoplay) { 
    animateSlider(); 
     } 

а вот что происходит, когда я нажимаю на кнопку с классом «.filter» - он фильтрует элементы (код удаляется, как это работает, и это не то, что я хочу сосредоточиться на), а затем инициирует animateSlider, чтобы он мог пересчитать количество элементов и как m любые времена он должен скользить:

 $('.filter').click(function(){ 
     // it does some stuff and then animates the slider again so it recalculates the widths and number of times it's supposed to slide: 

     animateSlider(); 
    }); 

Проблема заключается в том, что я не думаю, что это перезапускает функцию, вместо этого он запускает его снова и снова, и это не пересчитывать, сколько раз ползунок должен скользить (так когда я фильтрую элементы, он пропускает пустые слайды, а также элементы с элементами).

Я знаю о функции clearInterval(), но я попытался поставить его под setInterval без успеха.

Идеальное поведение должно быть - слайдер слайдов, после щелчка на «.filter» интервал останавливается и перезапускается с новой шириной и количеством элементов (вместо того, чтобы стрелять много раз без остановки).

Это второй день, когда я пытаюсь справиться с этим, я бы очень признателен за помощь.

Answer 1

Как говорит Дженкинс, вам нужно вернуть setInterval(), чтобы получить ссылку на созданную функцию интервала. Фактическая функция wrapper не возвращает ничего. Вы можете сделать это:

var intervalId = function() { 
    return setInterval(repeatSlider,howManyTimes * 500); 
} 

или

var intervalId = setInterval(repeatSlider,howManyTimes * 500);