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

Question

快乐新2020！我正在尝试使用纯JavaScript轮播插件Siema，因此很喜欢它。不过，由于我对JavaScript一无所知，因此我很难弄清楚这一点（我只是一个试图建立自己的投资组合的平面设计师）。

我设法将轮播设置为自动播放，每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);

Answer 1

要重置setInterval，请按以下方式使用clearInterval：

定义为变量

var intervalID = setInterval(YourFunction, 5000);

重设

clearInterval(intervalID);