Question

我目前遇到了问题。我正在使用css来隐藏和显示元素，具体取决于鼠标功能。我的一个元素（导航箭头）取决于其他一些东西。我现在需要一个cancleable计时器函数，在mouseleave上计算2秒，然后更改class属性。但它应该有一个计时器，立即取消鼠标悬停。我不希望它太早消失。在我到目前为止尝试的代码下面。我不知道如何访问setIntervall的当前时间。我很容易尝试使用Date.now（）。但现在我希望一些极客能够帮助我。

提前致谢。

function hideElementOnMouseOut(el)
{
    el.addEventListener("mouseleave", function( event )
    {   
        mySlideAction = setInterval( function()
        {

        }, 1000 );
    }
}

Answer 1

您可以在mouseleave函数上初始化间隔，并在mouseover函数上清除此间隔，这会阻止执行它的功能。

检查下面的代码段。

＆＃13;

function hideElementOnMouseOut(el)
{
    var interval;
  
    el.addEventListener("mouseleave", function(event)
    {   
        el.innerHTML = 'mouse out';
        interval = setInterval(function()
        {
            el.innerHTML = 'time out';
            el.className = 'out';
        }, 1000);
    });
                        
    el.addEventListener("mouseover", function(event)  
    {
        el.innerHTML = 'mouse in';
        el.className = '';
        if(interval) {              
          clearInterval(interval);
        }
    });
  
}
                        
hideElementOnMouseOut(document.getElementById("element"));

＆＃13;

#element {
  display: block;
  width: 200px;
  height: 200px;
  background: red; 
}

#element.out {
  background: blue;
}

＆＃13;

<div id="element"></div>

＆＃13;

Vanilla Javascript，mouseout延迟，取消没有jQuery

1 个答案: