JavaScript中setTimeout与鼠标悬停/移出事件冲突问题求助

嘿，我完全懂你碰到的麻烦了！就是当你在那2秒延迟还没走完的时候，又把鼠标移回eventDiv，结果之前触发的mouseSlideOut里的延迟操作还是会执行，把盒子变回原来的样子——哪怕你的鼠标明明还在eventDiv里面，对吧？

其实问题出在每次触发mouseSlideOut都会创建一个新的定时器，但之前的定时器并没有被取消，所以不管你后来有没有把鼠标移回去，它到时间就会自动执行。你说试过clearTimeout但没生效，应该是没把定时器的ID保存下来，没法精准取消对应的定时器。

下面给你调整好的代码，核心就是用一个变量保存定时器ID，每次鼠标移入的时候就把之前的定时器取消掉：

修改后的完整代码 #

// 声明全局变量存储定时器ID
let timeoutId;

function mouseSlideIn() {
    // 先清除之前可能存在的未执行定时器
    clearTimeout(timeoutId);
    document.getElementById("box").style = "background: blue; height: 50px; width: 50px;";
}

function mouseSlideOut() {
    // 把定时器ID存起来，方便后续取消
    timeoutId = setTimeout(function() {
        document.getElementById("box").style = "";
        document.getElementById("eventDiv").style = "";
    }, 2000);
}

body {
    background: grey;
    margin: 0;
}

#eventDiv {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 90vh;
    background: powderblue;
    border-radius: 20px;
    transition: 0.8s;
    transition-timing-function: ease;
}

#box {
    position: relative;
    background: red;
    height: 150px;
    width: 150px;
    transition: 0.5s;
    transition-timing-function: ease;
}

<center>
    <div id="eventDiv" onmouseover="mouseSlideIn()" onmouseout="mouseSlideOut()">
        <div id="box"></div>
        <!--Above is the red box i.e. inside the main DIV-->
    </div>
</center>

改动说明 #

1. 新增全局变量timeoutId：用来记录每次setTimeout返回的唯一ID，这个ID是取消定时器的关键
2. mouseSlideIn里添加clearTimeout(timeoutId)：每次鼠标移入时，先检查有没有未执行的移出定时器，如果有就直接取消，这样就不会出现“鼠标还在里面，盒子却自己变回去”的情况了
3. mouseSlideOut里把定时器ID赋值给timeoutId：这样每次触发移出事件时，都会更新这个ID，确保后续能精准取消对应的定时器

现在你再试试：当你在2秒内把鼠标移回eventDiv，之前的延迟恢复操作会被立刻取消，盒子保持缩小变蓝的状态；只有当鼠标真正移出eventDiv且超过2秒，才会触发恢复初始状态的操作，完全符合你的需求~

备注：内容来源于stack exchange，提问作者MUB