Есть ли способ очистить предыдущий setInterval до запуска нового - PullRequest
Новая
       25

Есть ли способ очистить предыдущий setInterval до запуска нового

0 голосов
/ 27 февраля 2020

Это код для запуска ползунка swiper, и когда слайды перемещаются или меняются слайды, я запускаю функцию перемещения, которая запускает метод setInterval для линии прогресса над слайдером, чтобы увеличить его ширину до 100%, но когда я проведите ползунком до того, как время автозапуска закончится, и снова запустите функцию move, и эта новая функция запустит новый setInterval, если только старый еще не завершен sh, поэтому у меня конфликт двух наборов интервалов. В любом случае мне нужно очистить старый, если его время еще не закончилось. Я надеюсь, что вы понимаете и знаете, где именно проблема. Наконец, спасибо, и извините за мой Engli sh :) есть ссылка под кодом, пожалуйста, просмотрите его 

var autoplay = 5000;
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
watchSlidesProgress: true,
autoplay: autoplay,
onProgress: move
});
function move() {
var elem = document.getElementById("progress"); 
var width = 1;
var autoplayTime = autoplay / 100;
var id = setInterval(frame, autoplayTime);
function frame() {
    if (width >= 100) {
        clearInterval(id);
    } else {
        width++; 
        elem.style.width = width + '%'; 
      }
   }
}

ссылка => https://codepen.io/shady-agmy/pen/OJVmNPw?editors=1010

1 Ответ

0 голосов
/ 27 февраля 2020

Вы очищаете интервал кадра прямо на анимации, но не очищаете интервал анимации при каждом последующем вызове для перемещения 

var autoplay = 5000;
var swiper = new Swiper('.swiper-container', {
pagination: '.swiper-pagination',
paginationClickable: true,
watchSlidesProgress: true,
autoplay: autoplay,
onProgress: move
});
var previousid;
function move() {
    var elem = document.getElementById("progress"); 
    var width = 1;
    var autoplayTime = autoplay / 100;
    clearInterval(previousid);
    previousid = setInterval(function(_id) { return function() {
        if (width >= 100) {
            clearInterval(_id);
        } else {
            width++; 
            elem.style.width = width + '%'; 
        }
    }}(previousid), autoplayTime);

}
console.log(swiper)
...