Javascript - clearTimeout dosen't clear the setTimeout variable

Question

I have this code, I tried to build a slider based on this tutorial: https://youtu.be/V9TCxMMpGhI?t=4170

after one hour and nine minutes (video link point to that time), he adds a setTimeout that restarts the time count after manually changing to a new slide.

the issue I have is that the clearTimeout in getNextSlide function doesn't work. I have tried to declare the variable globally as shown in w3school site explanation to clearTimeout but it still doesn't work

for example, if the timeout is set to 5 seconds. and if slide one is shown for 4 seconds and then I choose to see a different slide the next slide will be active for one second and not 5 as it is spouse...

What can be the issue?

here is the codepen of the slider

https://codepen.io/davsev/pen/NWdeVOQ

thanks

const slides = Array.from(document.querySelectorAll('.slide'))
const slider = document.querySelector('.slider')
const buttons = document.querySelectorAll('.sub-nav__list-item')
const dotEl = document.querySelector('.dots')
let slideLifeTime;

const getNextPrev = () => {
    const activeSlide =  document.querySelector('.slide.active');
    const activeIndex =  slides.indexOf(activeSlide);

    let next;
    if(activeIndex === slides.length - 1){
        next = slides[0]
    }else{
        next = slides[activeIndex + 1]
    }
    
    return next;
} 

const getNextSlide = () => {
    if(slideLifeTime){
        console.log('dav')
        clearTimeout(slideLifeTime);
        
    }

    console.log(slideLifeTime)
    const activeSlide =  document.querySelector('.slide.active');
    const activeIndex =  slides.indexOf(activeSlide);
    
    const current =  document.querySelector('.slide.active');

    setTimeout(() => current.classList.remove('active'), 1000);

    if (current.nextElementSibling) {
        current.nextElementSibling.classList.add('active', 'front')
    } else {
      slides[0].classList.add('active', 'front')
    }

    getPosition();
    getActiveDots();
    autoLoop();
}

const getPosition = () => {
    const activeSlide =  document.querySelector('.slide.active');
    const activeIndex =  slides.indexOf(activeSlide);
    
    const next = getNextPrev();

}


/** CREATE DOTS */
slides.forEach ( slide => {
    const dot = document.createElement('div');
    dot.classList.add('dot');
    dotEl.appendChild(dot);
})

const getActiveDots = () => {
    const allDots = document.querySelectorAll('.dots .dot');
    const activeSlide =  document.querySelector('.slide.active');
    const activeIndex =  slides.indexOf(activeSlide);
    
    allDots.forEach( dot => {
        dot.classList.remove('active');
    })

    allDots[activeIndex].classList.add('active');
}

const functionalDots = () => {
    const allDots = document.querySelectorAll('.dots .dot');

    allDots.forEach( (dot, index) => {
        dot.addEventListener('click', ()=>{
            getDotSlide(index);
        })
    })
}

const getDotSlide = (index) => {
    slides.forEach(slide => {
        console.log(slide)
        slide.classList.remove('active');
    });

    slides[index].classList.add('active');
    getPosition();
    getActiveDots();
}

const autoLoop = () => {
    slideLifeTime = setTimeout(() => {
        getNextSlide();
    },5000)
}

getActiveDots();
functionalDots();
autoLoop();

Answer 1

The function that handles a manual slide change is getDotSlide, so that's where you would need to call clearTimeout. This is done in the video at around 1 hour and 11 minutes.