JavaScript setTimeout this对象指向问题

上面这幅图片是原始的效果，

现在想鼠标移到图标上，显示图标的提示，但需要延时，也就是鼠标滑至图标上，并不立刻显示，而是等1秒后显示。

html部分

<div class="porHeadRit" >
        <a href="" class="a srch s-alt"><span>搜索</span></a>
        <a href="" class="a msg m-alt"><span>用户消息</span></a>
        <a href="" class="a usr u-alt"><span>个人信息</span></a>
 </div>

css样式：

.porHeadRit a.s-alt span,.porHeadRit a.m-alt span,.porHeadRit a.u-alt span{display:none;position:absolute;top:62px;width:56px;
height:24px;line-height:26px;z-index:1;border-radius: 2px;left:0px;  background-color: rgba(38, 39, 40, 0.8);font-size: 10px;
font-weight: 400;text-align:center;color:#fff;background:url(../images/info-tip.png) no-repeat;}

通过定位来实现图片的显示在图标的正下方

实现鼠标滑至图标上，延时一秒钟显示，只能通过js来实现

开始写的代码很low，但可以实现功能，就是代码非常臃肿，大家可以看下，后来觉得这也太小儿科了

var timer = null;
    function sshowCon(){  
        clearTimeout(timer);            
        timer = setTimeout(function(){
            $(".s-alt span").show();
        },1000); 
    };
    function shideCon(){ 
        clearTimeout(timer);        
        timer = setTimeout(function(){
            $(".s-alt span").hide();
        },300);        
    };
    function mshowCon(){ 
        clearTimeout(timer);               
        timer = setTimeout(function(){
            $(".m-alt span").show();
        },1000); 
    };
    function mhideCon(){
        clearTimeout(timer); 
        timer = setTimeout(function(){
            $(".m-alt span").hide();
        },300);
    };
    function ushowCon(){  
        clearTimeout(timer);             
        timer = setTimeout(function(){
            $(".u-alt span").show();
        },1000);                
    };
    function uhideCon(){
        clearTimeout(timer); 
        timer = setTimeout(function(){
            $(".u-alt span").hide();
        },300);
    };

看到了都想笑，后来尝试着优化，写更少的代码，来实现同样的功能，我的代码是这样写的，见下

var spanDom = $(".porHeadRit a");
    for(var i=0;i<spanDom.length;i++){
        spanDom[i].onmouseover = function(){
            clearTimeout(timer);            
            timer = setTimeout(function(){
                $(".porHeadRit a span").show();
            },1000); 
        };
        spanDom[i].onmouseleave = function(){
            clearTimeout(timer);            
            timer = setTimeout(function(){
                $(".porHeadRit a span").hide();
            },300); 
        };
    }

不能实现功能，就是鼠标滑上去，所有的图标的提示都显示了。for循环写的有问题，但也向好的方向的改进。

后来向别人请教，别人提到了jQuery有这样一个方法

$("你的对象").hover(function1,function2);

该函数具体可以参考http://www.jquery123.com/hover/　　

　　

但是还是没有解决，那是因为在实现的过程setTimeout传this对象是一个很大的坑，开始是这样写的代码

var timer = null;
        $(".porHeadRit a").mouseover(function(){
            clearTimeout(timer);            
            timer = setTimeout(function(){
                $(this).find('span').show().parent().siblings().children("span").hide();
            },500);
        }).mouseout(function(){
            var that = this;
            clearTimeout(timer);            
            timer = setTimeout(function(){
                $(this).find('span').hide();
            },300);
        });

但是上述写法没有效果，后来查了下，才知道setTimeout传this对象，有个指向的问题，如果没有指定，指向的是全局对象，也就是window.

后来查了下，有一种解决方法,这种解法可以实现鼠标滑至图标处，显示提示，但是没有延时。搞了好久，不知怎么解决。

var timer = null;
$(".porHeadRit a").mouseover(function(){
      clearTimeout(timer);            
      timer = setTimeout(function(self){
      $(self).find('span').show().parent().siblings().children("span").hide();
       }(this),500);
       }).mouseout(function(){
            clearTimeout(timer);            
            timer = setTimeout(function(self){
                $(that).find('span').hide();
            }(this),300);
 });

后来在网上查了解决方法，将this赋给that，通过that来指向当前对象，试了下可以解决问题　　

var timer = null;
$(".porHeadRit a").mouseover(function(){
      var that = this;
      clearTimeout(timer);            
      timer = setTimeout(function(){
      $(that).find('span').show().parent().siblings().children("span").hide();
       },500);
       }).mouseout(function(){
            var that = this;
            clearTimeout(timer);            
            timer = setTimeout(function(){
                $(that).find('span').hide();
            },300);
 });

 

说明：$("").hover(function1,function2);的简写方法是

　$("").mouseover().mouseout();用的是jQuery的链式写法。

 

记录码代码时的问题。　

　　

　　

转载于:https://www.cnblogs.com/WaTa/p/5766114.html