JavaScript：我需要一个赢得'；t关闭浏览器或阻止页面

我有一个旋转木马插件，我已经创建，我需要一种方法，让它运行一个功能，移动图像到一边，并带来了下一个图像。我使用导航箭头来实现这一点，但我想实现一种方法，让它自己实现这一点

我很难找到这方面的信息，因为谷歌的旋转木马库太多了

基本上，我只需要这样的东西：

window.setTimeout(() => {
  // do something
}, 1000);

window.setTimeout(() => {
  // do something
}, 1000);

但它需要反复运行，除非触发特定事件。我的第一个想法是

while

循环，但那将是灾难性的

我没有太多要展示的内容，但目前，代码如下：

  let mouseIsOver = false;

  inner.addEventListener('mouseenter', () => {
    mouseIsOver = true;

    console.log(mouseIsOver);
  });

  inner.addEventListener('mouseleave', () => {
    mouseIsOver = false;

    console.log(mouseIsOver);
  });

---

需要查看requestAnimationFrame

您可以使用重复调用函数的方法。然后调用

clearInterval

停止它

let-inner=document.getElementById（'inner'）；
让pages=['mediumspringgreen'，'coral'，'cyan'，'moccasin']；
让mouseIsOver=false；
让间隔=开始（）；
设i=0；
函数start（）{
返回setInterval（（）=>internal.style.background=pages[i++%4]，3000）；
}
inner.addEventListener（'mouseenter'，（）=>{
mouseIsOver=true；
间隔时间；
console.log（'pause'）；
});
inner.addEventListener（'mouseleave'，（）=>{
mouseishover=false；
console.log（'continue'）；
间隔=开始（）；
});
#内部{宽度：100px；高度：100px；背景：青色}
.作为控制台包装{最大高度：1.5em！重要；}

基本上，我只需要这样的东西：

window.setTimeout(() => {
  // do something
}, 1000);

window.setTimeout(() => {
  // do something
}, 1000);

但它需要反复运行，除非某个特定事件发生
触发

你考虑过吗

setInterval（）
方法。。。重复调用函数或执行代码段，每次调用之间有固定的时间延迟。它返回一个唯一标识间隔的间隔ID，因此您可以稍后通过调用
clearInterval（）
将其删除

考虑到您的用例，这里有一个可能的解决方案：

  let mouseIsOver = false;

  // start a timer that runs goToNextImage() every 1000 ms and
  // stores its ID so it can be cancelled on mouseenter
  let goToNextImageTimer = window.setInterval(goToNextImage, 1000);

  inner.addEventListener('mouseenter', () => {
    mouseIsOver = true;

    console.log(mouseIsOver);

    if (goToNextImageTimer !== null) {
      // stop interval timer if running
      window.clearInterval(goToNextImageTimer);
    }
  });

  inner.addEventListener('mouseleave', () => {
    mouseIsOver = false;

    console.log(mouseIsOver);

    if (goToNextImageTimer === null) {
      // start interval timer if not running
      goToNextImageTimer = window.setInterval(goToNextImage, 1000);
    }
  });

RequestAnimationFrame您可以使用
window.setInterval（（）=>{}，1000）
使其连续。setInterval并存储其句柄以进行取消？也可能重复，您可以从正在调用的函数再次调用setTimeout，然后在继续之前检查事件是否已触发。对于这样的用例，我不会使用
requestAnimationFrame
，因为提问者似乎不需要（引用MDN文章）“在下次重新绘制之前更新动画”，而是每隔一秒左右调用它
setInterval
看起来更适合这个用例。如果调用的函数实际上是在每一帧为旋转木马制作动画，那么我建议使用
requestAnimationFrame
（可能由
setInterval
启动）。@ArkaneMoose在DOM中使用js制作任何类型的动画时，都需要使用requestAnimationFrame。它是专门为此问题空间设计的。请注意提供一个使用
requestAnimationFrame
每3秒执行一次操作的示例。我只是好奇你是如何实现它的。顺便说一句，我不会对你投反对票。你需要使用requestAnimationFrame，因为这允许浏览器选择下一个可用渲染帧何时可用。@Geuis你错了
requestAnimationFrame
设计用于为元素设置动画（例如，每秒重新绘制60次）。并且
setInterval
以固定速率执行某些操作（这是OP要求的）。从技术上讲，
setInterval
可以用来执行动画，
requestAnimationFrame
可以用来以固定速率执行某些操作，但这两种方法都是不好的做法。我将他的问题解释为需要反复运行相同的函数来更改CSS属性。您不应该在setTimeout内执行此操作，因为它会阻止浏览器选择最有效的重新绘制时间。