Javascript

Question

我有这段代码，我尝试根据本教程构建一个滑块： https://youtu.be/V9TCxMMpGhI?t=4170

1 小时 9 分钟后（视频 link 指向那个时间），他添加了一个 setTimeout，在手动切换到新幻灯片后重新开始计时。

我遇到的问题是 getNextSlide 函数中的 clearTimeout 不起作用。我已尝试全局声明变量，如 w3school 网站对 clearTimeout 的解释所示，但它仍然不起作用

例如，如果超时设置为 5 秒。如果第一张幻灯片显示 4 秒，然后我选择看另一张幻灯片，下一张幻灯片将激活一秒而不是 5 秒，因为它是配偶...

可能是什么问题？

这里是滑块的codepen

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

谢谢

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

处理手动幻灯片更改的函数是 getDotSlide，因此您需要在此处调用 clearTimeout。这是在大约 1 小时 11 分钟的视频中完成的。

Javascript - clearTimeout 不清除 setTimeout 变量

Javascript - clearTimeout dosen't clear the setTimeout variable

settimeout

cleartimeout