停止使用 setInterval 自动播放的 javascript 幻灯片 - Siema答案

【问题标题】：Stop javascript slideshow which is autoplaying using setInterval - Siema停止使用 setInterval 自动播放的 javascript 幻灯片 - Siema
【发布时间】：2017-10-27 16:17:32
【问题描述】：

我正在使用siema 幻灯片，因为它看起来超级漂亮且轻巧。

我希望幻灯片在用户将鼠标悬停时播放，并在用户离开时停止。

根据指南文档，我已经开始播放了 - 使用 setInterval()，但我无法让幻灯片停止。我试图消除间隔，但这似乎不起作用。

这是我的完整代码

const mySiema = new Siema({
  duration: 250,
  loop: true, // note: this just gets the slideshow to return to the beginning
});

const container = document.querySelector('.siema');

var timer, intervalInSec = 1000;

container.addEventListener('mouseenter', () => setInterval(() => mySiema.next(), intervalInSec));

container.addEventListener('mouseleave', clearInterval(timer));

和heres a codepen 摆弄。

【问题讨论】：

您不会将计时器分配给任何地方的处理程序。

标签： javascript slideshow setinterval siema

【解决方案1】：

您需要将计时器分配给setInterval() 方法的输出。

它（setInterval）返回一个唯一标识区间的区间ID，所以你可以稍后通过调用clearInterval()来移除它

您还需要在鼠标离开事件上调用匿名函数才能正确调用 clearInterval()。例如：

container.addEventListener('mouseenter', () => timer = setInterval(() => mySiema.next(), intervalInSec));

container.addEventListener('mouseleave', () => clearInterval(timer));

【讨论】：

非常感谢......所以那些空括号是匿名函数......我实际上已经尝试了第一个，但我认为这就是我所缺少的。谢谢。 5分钟内可以接受
对，你可以在addEventListener的第二个参数中输入一个函数的名称（不要用()调用它），或者执行一个匿名函数并输入你想要的任何代码在里面（就像我们在这里做的那样）
对于那些感兴趣的人来说，这里是完整工作的 codepen，每个功能都可以消除初始延迟并返回开始。 codepen.io/venncreative/pen/GOKVeW