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。像这样：

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 2

我没有看到您在函数范围之外定义区间变量，所以它可能会丢失。此外，这不应该是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 3

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

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

ps：学习总是很好的，但不要太努力去重新发明轮子。举个例子：https://owlcarousel2.github.io/OwlCarousel2/demos/basic.html响应、自动、触摸支持等…

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>