JavaScript

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

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

这是一个设置计时器和按钮的函数，以及 returns 一个 closure（一个在返回后将信息保留在其前面的词法环境中的函数）控制超时。

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>

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

JavaScript - Restart setTimeout timer in a recursive function

settimeout