setTimeout用於取消多次執行mouseover或者mouseenter事件,間接實現hover的懸停加載的效果.

Mouseenter在鼠標滑上去不會對其子元素也發生監聽,

Mouseover在鼠標滑上去會對其子元素發生監聽.

所以對於事件的監聽,我們要看需求,這里是對父元素的監聽,不需要對子元素做監聽.就用mouseenter與mouseleave.

mouseenter是不會對其里面的子元素做監聽,所以我們對這個li做mouseenter和mouseleave的監聽就是正確的.

帶settimeout的mouseover事件

function add_color(b){
    var x='#'+b;
    var num = $(x).index();
    //console.log(num);
    $(x).addClass("lihover").siblings().removeClass("lihover");
    if (num == 0) {
        $(x).addClass('blue');
    }
    else if (num == 1) {
        $(x).addClass('green');
    }
    else if (num == 2) {
        $(x).addClass('orange');
    }
}

$(function() {
    $("#topmenu li").mouseover(function () {
        var id = $(this).attr("id");
        timeout = setTimeout(function () {
            add_color("" + id + "");
        }, 400);
    }).mouseout(function () {
    clearTimeout(timeout);
        $(this).removeClass();
    });
});

 分析:add_color是添加一個css樣式的js函數.在鼠標移上去觸發mouseover,400毫秒之后執行add_color的方法.這時在mouseout中添加clearTimeout的事件,這樣如果沒有到400毫秒之前就移出鼠標觸發mouseout事件,那么就清除掉timeout,也就是不執行里面的那個add_color的方法,那么相應的css樣式的效果也不會觸發.這樣類似就做到了鼠標懸停上達到400毫秒才會觸發事件的錯覺.而后面的那句

 $(this).removeClass();是針對觸發了事件之后才移除css樣式,邏輯上並不沖突.
並且鼠標快速滑過的時候,不會讓這些css樣式觸發(這里的樣式是出現一個帶顏色懸浮層,如果頻繁滑動,會導致顏色一致切換,給人一種花屏的錯覺),從而阻止了閃屏的發生.

 界面的懸浮層圖例:

我的項目中:研究了一下,發現之前的mouseover和mouseout能夠進入到懸浮層的原因,是因為li下的每個子元素都是連在一起的,沒有settimeout的事件的時候,你在li里面滑動一下鼠標,(滑過的子元素)都會觸發mouseover和mouseout的事件,但是由於沒有延時效果,連在一起,頻繁來回觸發,就看不出有什么區別.所以在設置 settimeout之后,在cleartimeout(timeout)的事件中,他立馬阻止了addcolor這個事件(顯示懸浮層的事件)的發生.那么mouseover后就沒有懸浮層的效果了.