JavaScript:我需要一个连续的循环,不会杀死浏览器或阻止页面

wd2eg0qa  于 2023-05-16  发布在  Java
关注(0)|答案(3)|浏览(132)

我有一个轮播插件,我已经创建,我需要一种方法来让它运行一个功能,将图像移动到一边,并在下一个图像带来。我有这个工作与导航箭头,但我想实现一种方法,它这样做的本身。
我很难找到这方面的信息,因为谷歌是臃肿与每个人的旋转木马库。
基本上,我只需要像这样的东西:

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

aurhwmvo1#

您可以使用setInterval方法,该方法重复调用一个函数。然后调用clearInterval来停止它。

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

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

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

inner.addEventListener('mouseleave', () => {
  interval = start();
  console.log('continue');
});
#inner { width: 100px; height: 100px; background: cyan }
.as-console-wrapper { max-height: 1.5em !important; }
<div id=inner></div>
fhity93d

fhity93d2#

基本上,我只需要像这样的东西:

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

但它需要一遍又一遍地运行,除非触发了某个特定的事件。
你有没有考虑过window.setInterval()
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);
    }
  });

相关问题