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后就没有悬浮层的效果了.