Is there is any way to clear the previous setInterval before firing new one - setinterval

Question

This is a code to run swiper slider and when the slides move or on slide change, I fire a move function which fires a setInterval method to a progress line above the slider to increase its width to be 100%, but when I swipe the slider before the autoplay time ends it run the function move again and this new function fire a new setInterval unless the old one still not finish yet, so I have a two setintervals conflict here.
I need anyway to clear the old one however if its time does not end yet.
I hope you understand and know where is the issue exactly.
Finally thanks, and Sorry for my English :)
there is a link under the code kindly see it
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 + '%';
}
}
}
link => https://codepen.io/shady-agmy/pen/OJVmNPw?editors=1010

Answer 1

you're clearing the frame interval just right on the animation, but you are not clearing the animation interval on each subsequent call to move
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)