JavaScript - 在递归函数中重新启动 setTimeout 计时器

Question

我正在尝试在 css 和 js 中制作自动幻灯片。 我有一个在指定时间后无限循环图像数组（在幻灯片中）的函数。

function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    t = setTimeout("autoSlide()", time);
}

但是如果我通过按下按钮手动更改幻灯片，我想重置计时器time 。 我试过这个，但没有用：

function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';

    nextBtn.addEventListener('click',()=>{
        clearTimeout(t);
    })

    t = setTimeout("autoSlide()", time);
}

任何帮助将非常感激。

谢谢。

Answer 1

我没有看到您在函数范围之外定义区间变量，因此它可能会丢失。 另外，这不应该是setInterval与setTimeout吗？ 您可以使用任何一种，但如果您的目标是无限重复直到某个条件，则setInterval更合适

let interval = setInterval(autoSlide, time); // variable being initialized outside function scope
nextBtn.addEventListener('click',()=>{
  clearInterval(interval);
  interval = setInterval(autoSlide, time)
})
function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
    // ... presumably other logic to progress your slideshow every 'time'
}

Answer 2

一种方法是在您单击时重新创建计时器。 不仅要删除计时器，还要重新创建它。

nextBtn.addEventListener('click',()=>{
    clearTimeout(t);
    t = setTimeout(autoSlide, time);
})

ps：学习总是好的，但不要尝试太多重新发明轮子。 使用此示例： https : //owlcarousel2.github.io/OwlCarousel2/demos/basic.html响应式、自动、触摸支持等...

Answer 3

请使用setInterval而不是setTimeout 。 像这样：

function autoSlide(){
    carouselSlide.style.transition = "transform 1s ease-in-out";
    counter++;
    carouselSlide.style.transform = 'translateX(' + (-size * counter) + 'px)';
}
var t = setInterval(autoSlide, time)
nextBtn.addEventListener('click',()=>{
    clearInterval(t);
    t= setInterval(autoSlide, time)
})

Answer 4

如果这是一个轮播，您希望您的超时时间相同，但在您单击按钮时重置计数器。

这是一个函数，它设置你的计时器和按钮，并返回一个控制超时的闭包（一个在返回后保留其前一个词法环境中的信息的函数）。

 function handler() { const time = 1000; let counter = 0; const button = document.addEventListener('click', () => counter = 0); return function loop() { // Your transform code goes here console.log(counter); counter++; setTimeout(loop, time); } } // autoSlide is the returned function const autoSlide = handler(); autoSlide();

 <button>Stop the sliding!</button>