setTimeout（）之後檢查是否仍然鼠標移出

我有一段代碼在mouseout上隱藏了一個元素。setTimeout（）之後檢查是否仍然鼠標移出

的代碼看起來是這樣的：

var myMouseOutFunction = function (event) { 

    setTimeout(function() { 

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

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

    }, 200); 

};

這將產生非常接近我想要做的結果。但是，我想等待超時時間（在本例中爲200毫秒），然後檢查鼠標是否仍然「不在」該元素。如果是這樣，我想在所需的元素上執行.hide（）和.show（）。

我想這樣做，因爲如果用戶稍微粘貼出來然後快速粘貼回來，我不希望元素閃爍（意思是：隱藏然後顯示真正快），當用戶只是想看到元素。

來源

2012-10-10 Jeff

如果這個問題回答，請隨時接受最適合的答案。 –

詳圖Kolink答案

DEMO：http://jsfiddle.net/EpMQ2/1/

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

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

來源

2012-10-10 18:28:26

將超時的返回值分配給變量，然後在onmouseover事件中使用clearTimeout。

來源

2012-10-10 18:22:40

+1。 clearTimeout位非常大。我已經開始在Backbone應用程序中執行類似的操作，以重複由setInterval觸發的AJAX調用。在初始通話開始清除間隔之前，出現了很多非常'怪異'的行爲。 –

你應該使用jQuery的mouseenter和mouseleave。 mouseenter和mouseleave只會被調用一次，並使用一個標誌來檢查是否再次調用mouseenter。

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

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

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

     isMouseEnter = true; 
    }

來源

2012-10-10 18:23:21 Anoop

使用布爾標誌：

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

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

來源

2012-10-10 18:24:34

setTimeout（）之後檢查是否仍然鼠標移出

回答

相關問題