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的链式写法。

 

记录码代码时的问题。 

  

  

posted @ 2016-08-12 18:59  Tome.Wong  阅读(394)  评论(0编辑  收藏  举报