如何在交互时重置/停止 Siema 自动播放间隔？答案

【问题标题】：How do I reset/stop Siema autoplay interval on interaction?如何在交互时重置/停止 Siema 自动播放间隔？
【发布时间】：2020-04-22 13:58:01
【问题描述】：

我正在尝试纯 JavaScript 轮播插件 Siema。

我将轮播设置为自动播放，每 5 秒更换一次幻灯片，还添加了“上一个”和“下一个”按钮来手动更改幻灯片。

5 秒的间隔不间断运行，因此每当我开始手动与滑块交互时，例如单击其元素或其上一个/下一个按钮，自动播放会迅速赶上并再次更改幻灯片。

我希望在用户第一次与滑块的任何元素交互时停止自动播放。或者，如果这不可能，只要有这种交互，就重置延迟，这样幻灯片就不会突然改变。

这是一个展示代码的最小现场演示：https://codepen.io/hyades/pen/abzVREV

const mySiema = new Siema({
    duration: 500,
    loop: true,
    easing: "cubic-bezier(.42,0,.58,1)",
    draggable: false,
});

document.querySelector(".prev").addEventListener("click", () => {
    mySiema.prev();
});
document.querySelector(".next").addEventListener("click", () => {
    mySiema.next();
});

setInterval(() => mySiema.next(), 5000);

【问题讨论】：

标签： javascript carousel autoplay siema

【解决方案1】：

要重置 setInterval，请使用 clearInterval，如下所示：

定义为变量

var intervalID = setInterval(YourFunction, 5000);

重置

clearInterval(intervalID);

【讨论】：