我有一个我创建的旋转木马插件,我需要一种方法让它运行一个函数,将图像移到一边并引入下一个图像。我有这个与导航箭头一起工作,但我想实现一种方法让它自己做到这一点。
我很难找到这方面的信息,因为谷歌被每个人的轮播库填满了。
基本上,我只需要这样的东西:
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);
});
您可以使用重复调用函数的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>
基本上,我只需要这样的东西:
window.setTimeout(() => { // do something }, 1000);
但是它需要一遍又一遍地运行,除非特定事件是 触发。
window.setInterval()
?
方法...重复调用函数或执行代码片段,每次调用之间有固定的时间延迟。它返回一个唯一标识间隔的间隔 ID,因此您可以稍后通过调用setInterval()
. 将其删除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。 https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame