JavaScript：我需要一个不会终止浏览器或阻止页面的连续循环

Question

我创建了一个旋转木马插件，我需要一种方法来使用它运行一个将图像移到一边并引入下一张图像的功能。我有这个与导航箭头一起工作，但我想实现一种方法让它自己完成。

我找不到这方面的信息，因为 Google 被每个人的轮播库填满了。

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

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);
  });

Answer 1

需要查看requestAnimationFrame。 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame

Answer 2

您可以使用重复调用函数的 setInterval 方法。然后调用clearInterval停止它。

let inner = document.getElementById('inner');
let pages = ['mediumspringgreen', 'coral', 'cyan', 'moccasin'];
let mouseIsOver = false;
let interval = start();
let i = 0;

function start() {
    return setInterval(() => inner.style.background = pages[i++ % 4], 3000);
}

inner.addEventListener('mouseenter', () => {
  mouseIsOver = true;
  clearInterval(interval);
  console.log('pause');
});

inner.addEventListener('mouseleave', () => {
  mouseIsOver = false;
  console.log('continue');
  interval = start();
});

#inner { width: 100px; height: 100px; background: cyan }
.as-console-wrapper { max-height: 1.5em !important; }

<div id=inner></div>

Answer 3

Basically, I just need something like:
window.setTimeout(() => {
  // do something
}, 1000);
But it needs to run over and over unless a particular event is triggered.

你考虑过window.setInterval()吗？

The setInterval() method... repeatedly calls a function or executes a code snippet, with a fixed time delay between each call. It returns an interval ID which uniquely identifies the interval, so you can remove it later by calling 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);
    }
  });

JavaScript：我需要一个不会终止浏览器或阻止页面的连续循环

JavaScript: I need a continuous loop that won't kill the browser or block the page

javascript

loops

carousel

continuous