如何在循环中执行事件，直到事件为真答案

【问题标题】：How to execute an event in a loop until the event is true如何在循环中执行事件，直到事件为真
【发布时间】：2021-10-28 10:25:37
【问题描述】：

当事件侦听器正在运行时，我在循环一段代码时卡在 Javascript 中放置。

例如，假设我有一个 div：

<div id="option">
</div>

我添加了一个 Javascript mouseenter 事件监听器：

const divItem = document.getElementById("option")
divItem.addEventListner("mouseenter", () => {
    console.log("Mouse is entered")
})

现在控制台日志在鼠标悬停后发生一次，但我希望它每 4 秒发生一次并在控制台中记录相同的消息，直到鼠标移出 div。

我尝试使用setTimeout：

divItem.addEventListner("mouseenter", () => {
    const timeoutEvent = () => {
         console.log("Mouse is entered")
         setTimeout( () => { timeoutEvent() }, 4000 )
    }
    timeoutEvent()
})

但即使在鼠标离开 div 后它仍在记录，那我该如何解决呢？

【问题讨论】：

标签： javascript html css google-chrome dom-events

【解决方案1】：

你在正确的轨道上。如果您希望每四秒一次，您希望：

使用setInterval（或每次设置一个新的setTimeout），并且
看到mouseleave就取消

const divItem = document.getElementById("option")
// The timer handle so we can cancel it
let timer = 0; // A real timer handle is never 0, so we can use it as a flag
divItem.addEventListener("mouseenter", () => {
    console.log("Mouse is entered");
    timer = setInterval(() => {
        if (timer) {
            console.log("Mouse is still here");
        }
    }, 1000);
})
divItem.addEventListener("mouseleave", () => {
    console.log("Mouse left");
    clearInterval(timer);
    timer = 0;
});

<div id="option">
this is the div
</div>

（我在该示例中使用了 1 秒而不是 4 秒，因此更容易看到它的工作原理。）

或者使用 setTimeout 重新安排自身：

const divItem = document.getElementById("option")
// The timer handle so we can cancel it
let timer = 0; // A real timer handle is never 0, so we can use it as a flag
const timerInterval = 1000;
function tick() {
    if (timer) {
        console.log("Mouse is still here");
        timer = setTimeout(tick, timerInterval);
    }
}
divItem.addEventListener("mouseenter", () => {
    console.log("Mouse is entered");
    timer = setTimeout(tick, timerInterval);
})
divItem.addEventListener("mouseleave", () => {
    console.log("Mouse left");
    clearTimeout(timer);
    timer = 0;
});

<div id="option">
this is the div
</div>

【讨论】：

【解决方案2】：

您应该使用setInterval 而不是setTimeout。

您可以在全局范围内定义您的“间隔”函数和间隔，然后使用它们来设置和启动间隔执行以及 mouseenter/mouseleave 事件上的 clearInterval（停止执行）。

const divItem = document.getElementById("option")
let myInterval;
const timeoutEvent = () => {
  console.log("Mouse is entered")
}
divItem.addEventListener("mouseenter", () => {
  myInterval = setInterval(timeoutEvent, 1000);
})
divItem.addEventListener("mouseleave", () => clearInterval(myInterval))

<div id="option">
  My Option
</div>

【讨论】：

【解决方案3】：

divItem.addEventListener("mouseenter", () => {
    console.log("Mouse is entered");
    timer = setInterval(() => {
            console.log("Mouse is still here");
        }
    }, 4000);
})

【讨论】：

虽然此代码可以回答问题，但提供有关如何和/或 为什么 解决问题的附加上下文将改善答案的长期价值。