javascript - 在 setTimeout() 之后检查鼠标是否还在

Question

我有一段代码在鼠标移出时隐藏了一个元素。

代码如下所示：

var myMouseOutFunction = function (event) {

    setTimeout(function () {

    $(".classToHide").hide();

    $(".classToShow").show();

    }, 200);

};

这会产生非常接近我想要做的结果。但是，我想等待超时时间（在本例中为 200 毫秒），然后检查我的鼠标是否仍然“超出”元素。如果是，我想对所需元素执行 .hide() 和 .show() 。

我想这样做是因为如果用户稍微将鼠标移出然后迅速将鼠标移回，当用户只想查看元素时，我不希望元素闪烁（意思是：隐藏然后快速显示）。

Answer 1

将超时的返回值分配给一个变量，然后clearTimeout在 onmouseover 事件中使用。

Answer 2

详解Kolink答案

演示：http: //jsfiddle.net/EpMQ2/1/

var timer = null;
element.onmouseout = function () {
    timer = setTimeout(function () {
      $(".classToHide").hide();
      $(".classToShow").show();
    }, 200);
}

element.onmouseover = function () {
    clearTimeout(timer);
}

Answer 3

你应该使用jquery 的mouseenter和mouseleave。mouseenter 和 mouseleave 只会被调用一次。如果mouseenter再次调用，请使用标志 if 检查。

  var isMouseEnter ;
    var mouseLeaveFunction = function (event) {
       isMouseEnter = false;
        setTimeout(function () {
             if(isMouseEnter ){ return;}
             $(".classToHide").hide();

                $(".classToShow").show();

           }, 200);
    };
    var mouseEnterFunction = function(){

        isMouseEnter = true;
     }

Answer 4

使用布尔标志：

var mustWait = true;
var myMouseOutFunction = function (event) {

    setTimeout(function () {
        if(mustWait){
            mustWait = false;
        }
        else{
            $(".classToHide").hide();
            $(".classToShow").show();
            mustWait = true;
       }
    }, 200);
};