Javascript Mouseenter和mouseleave-在触发功能之前请稍等片刻？

我有一个元素，当用户鼠标移入或移出时，我想更改它的CSS。一些触发该事件的函数非常简单：

function expandDiv(){
  div1.classList.add('expanded')
}

function shrinkDiv(){
  div1.classList.remove('expanded')
}

但是，我希望在函数实际触发之前，用户能够在该元素上方（或远离该元素）停留一小段时间（比如200毫秒）。这是为了可用性，因为快速跳过元素不应该触发函数。讨论了这个问题，我喜欢这个解决方案：

var delay = function (elem, callback) {
var timeout = null;
    elem.onmouseover = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 1000);
    };

    elem.onmouseout = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};

但是，当回调函数是my

expandDiv（）

或

shrinkDiv（）

函数时，此解决方案只能在一个方向上工作。我试图简单地用

delay（）

结构编写两个函数，并反转

onmouseout

和

onmouseinter

事件：

// Delay functions
var delayIn = function (elem, callback) {
    var timeout = null;
    elem.onmouseover = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 1000);
    };

    elem.onmouseout = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};

var delayOut = function (elem, callback) {
    var timeout = null;
    elem.onmouseout = function() {
        // Set timeout to be a timer which will invoke callback after 1s
        timeout = setTimeout(callback, 200);
    };

    elem.onmouseover = function() {
        // Clear any timers set to timeout
        clearTimeout(timeout);
    }
};

delayIn(div1, expandDiv);
delayOut(div1, shrinkDiv);

但这是行不通的。当delayIn和delayOut都被调用时，delayIn函数什么也不做。请参阅此代码笔：

我不确定出了什么问题。div应该在其上悬停一秒钟后展开，除非在第二秒钟结束前将鼠标移出。但它什么也没做。我添加了一个“Expandthediv”按钮来强制它，您可以看到，如果将鼠标移到Div和mouseout上，它确实会从shrinkDiv函数中收缩，但不会像delayOut函数中那样延迟

我还试图将此行为链接到按钮。有一个“收缩div”按钮。所需的行为是单击按钮，并且div将在定义的setTimout延迟后收缩，除非在超时完成之前将鼠标输入div。这也不会发生

---

我觉得这是一项相对简单的任务，但我却无法完成。我想学习如何在没有jQuery的情况下完成它。我也意识到这可能是一个值得称赞的地方，但我是新来的，还不能发表评论。如果这是一种糟糕的形式，很抱歉。

您在

delayIn

中指定的onmouse*处理程序在

delayOut

中被覆盖-这就是为什么只有一个“动画”执行它应该执行的操作

var div1=document.querySelector（'#div1'）
var button=document.querySelector（“#button”）
函数expandDiv（）{
div1.classList.add（'expanded'）
}
函数shrinkDiv（）{
div1.classList.remove（'expanded'）
}
var delayInOut=函数（元素、增量、outcb）{
var超时=null；
var clearto=函数（）{
clearTimeout（超时）；
超时=空；
};
elem.onmouseover=函数（）{
clearto（）；
超时=设置超时（增量，1000）；
}
elem.onmouseout=函数（）{
clearto（）；
超时=设置超时（outcb，200）；
}
}
delayInOut（div1、expandDiv、shrinkDiv）；
expandButton.onclick=expandDiv
shrinkButton.addEventListener（“单击”，函数（）{
var timeout=setTimeout（shrinkDiv，1000）；
}，false）

正文{
位置：相对位置；
填充：0px；
边际：0px；
}
#第一组{
位置：绝对位置；
顶部：20px；
左：20px；
右：20px；
高度：50px；
背景色：深蓝色；
过渡：高度1s；
}
#第1.2款{
高度：70像素；
}
#扩展按钮{
位置：绝对位置；
左：20px；
顶部：100px；
}
#收缩按钮{
位置：绝对位置；
左：20px；
顶部：125px；
}

展开Div
延迟后收缩Div

您在

delayIn

中分配的onmouse*处理程序在

delayOut

中被覆盖，您的

delayInOut

正在为我工作。非常感谢。我也能够消除if语句，至少现在是这样。css中定义的延迟非常好，但是如果您将鼠标移回或移出div，它不会禁用转换。是吗？你如何回答关于按钮的问题？按下按钮后，div将在x ms内收缩，除非将鼠标移到div中？我觉得我需要一个单独的函数，不是吗？是的，我不确定是否需要if语句@SethLutske-将它们从code@SethLutske-我以为你的按钮是用来测试。。。当然，如果您需要类似于代码的按钮，那么仅CSS的解决方案将不起作用