用setTimeout实现在DOM上(通常是菜单栏)鼠标停留一段时间才执行相应的操作

在做一个网站、用到了这个。

通常网站是为了防止用户鼠标无意划过菜单、导致子菜单显示出来。其实用户在菜单上停留一段时间才代表用户要看那个子菜单。无意划过的时候不需要显示子菜单。所以这边就需要来一个 鼠标停留一段时间以上才执行显示子菜单的动作。

 

这个在很多网站上都有用

比如京东淘宝、在用户鼠标快速经过的时候并不会显示二级菜单或者切换panel

      

 

自己本来想用jquery的delay函数的、但是想到delay函数只是延迟而已、用户鼠标移开的时候、过一段时间还是会执行那个显示操作、所以应该在用户离开元素的时候把计时的参数清除掉。所以这边就用了纯纯的javascript的setTimeout来实现

 

 /********************右侧面板切换*************/
                var t;   //时间变量

                var panelChange = function(){
                    
                
                    //匿名函数传递参数
                    (function(obj){
                        return t = setTimeout(function(){
                            var num = obj.attr("class").split("-")[2];
                            $.each($(".panel-guide span"), function(){
                                    $(this).removeClass("selected");
                            });

                            obj.addClass("selected");

                            $.each($(".panel-bd div"), function(){
                                if ($(this).attr("class") == "panel-detail-" + num){
                                    $(this).css("display", "block");
                                } else {
                                    $(this).css("display", "none");
                                }
                            });
                        }, 200);
                    }($(this)));
                   
                    
                };

                $.each($(".panel-guide span"), function(){
                    $(this).bind({
                        "mouseover": panelChange,
                        "mouseout": function(){
                            clearTimeout(t);
                        }
                    });
                });

                /***************切换end*****************/

 

代码简单的、如果用户鼠标进入DOM就开始计时、如果离开了就清除计时、然后动作也就不会执行了。

 

这边需要注意一点的是= =你看见上面有个匿名函数了么、我本来被坑了、

setTimeout 是在全局window变量的函数、我里面有一个obj用到的是panelChange里面的$(this) 所以这边因为作用域的问题导致  $(this).addClass("selected") 失效

 

所以要用匿名函数把变量传进去、利用闭包来实现正确的传参.....  突然又想复习一下this的几个作用域的特性的- -好久没接触突然遇到 心跳了一下、

 

不知道改变作用域的方式能不能写成功- -希望有经验的童鞋能指导一下其他方法来实现这个....