利用setTimeout()计时器延迟方法,JS事件效果不起作用的原因及解决办法

javascript的setTimeout()方法用来实现延时执行代码效果。

 jquery下的setTimeout执行alert没问题,执行某个div消失就不行了?

  1. $('.number_dv li').hover(function()  
  2.   setTimeout(function(){  
  3.     $(this).children('.zhegai_').stop().css("display","block");  
  4.     alert('1');  
  5.   },2000);  
  6. }) 

 

错误原因

由于此时的$(this)在setTimeout()方法里不再归属于hover事件的当前DOM节点,因此无法实现hover事件的DOM的操作!

调试结果:

JS事件console.log()调试结果
JS事件console.log()调试结果
通过调试结果可以看到,此时的DOM节点($(this))不是当前的li标签!
 
 

解决方法

将$(this)赋值给一个变量,传递到setTimeout()方法里,即可实现当前DOM的操作!

  1. $('.number_dv li').hover(function() 
  2.   var _self = $(this); 
  3.   setTimeout(function(){ 
  4.     _self.children('.zhegai_').stop().css("display","block"); 
  5.     alert('1'); 
  6.   },2000); 
  7. }) 

 调试结果:

console.log() JS事件调试结果2
console.log() JS事件调试结果2

 

 

相关经验

导读书签
书签初始化中…