setTimeout内不支持jquery的选择器的解决方案


Posted in Javascript onApril 28, 2015

今天在写一个js延时事件的时候发现在setTimeout这个方法里面使用jquery的$(this)竟然不起作用,各种测试,最后得出结论是setTimeout内不支持jquery的选择器。于是请教了一下QQ上做jquery开发的高手,马上就把这问题解决了,在这里记录一下。
下面是作者做延时处理时的js代码:

$('.dl_select dt').hover( 
  function(){ 
    clearTimeout(t3); 
    $(this).siblings('dd').css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    t2=setTimeout(function(){$(this).siblings('dd').css({'display':'none'});},300); 
  } 
); 
$('.dl_select dd').hover( 
  function(){ 
    clearTimeout(t2); 
    $(this).css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    t3=setTimeout(function(){$(this).css({'display':'none'});},200); 
  } 
);

注意以上代码中得setTimeout里的代码,如果这些代码不在这个方法里面,本身是没有问题的,但是如上这种情况是会报错的。至于原因,作者现在也没有弄明白。经网友点化改成如下就没事儿了,方法很巧妙。如下是正确的代码:

$('.dl_select dt').hover( 
  function(){ 
    clearTimeout(t3); 
    $(this).siblings('dd').css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    var $this=$(this).siblings('dd'); 
    t2=setTimeout(function(){$this.css({'display':'none'});},300); 
  } 
); 
$('.dl_select dd').hover( 
  function(){ 
    clearTimeout(t2); 
    $(this).css({'display':'block','cursor':'pointer'}); 
  }, 
  function(){ 
    var $this=$(this); 
    t3=setTimeout(function(){$this.css({'display':'none'});},200); 
  } 
);

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
javascript中的prototype属性使用说明(函数功能扩展)
Aug 16 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
JQuery之拖拽插件实现代码
Apr 14 Javascript
javascript高级程序设计第二版第十二章事件要点总结(常用的跨浏览器检测方法)
Aug 22 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jQuery获取当前对象标签名称的方法
Feb 07 Javascript
js实现a标签超链接提交form表单的方法
Jun 24 Javascript
js获取图片宽高的方法
Nov 25 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
Apr 17 Javascript
js显示动态时间的方法详解
Aug 20 Javascript
Js动态设置rem来实现移动端字体的自适应代码
Oct 14 Javascript
原生js编写焦点图效果
Dec 08 Javascript
chrome不支持form.submit的解决方案
Apr 28 #Javascript
javascript截取字符串小结
Apr 28 #Javascript
JavaScript 实现完美兼容多浏览器的复制功能代码
Apr 28 #Javascript
jQuery通过Ajax返回JSON数据
Apr 28 #Javascript
javascript实现控制文字大中小显示
Apr 28 #Javascript
Jquery中$.post和$.ajax的用法小结
Apr 28 #Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 #Javascript
You might like
ThinkPHP实现多数据库连接的解决方法
2014/07/01 PHP
thinkphp中字符截取函数msubstr()用法分析
2016/01/09 PHP
laravel自定义分页的实现案例offset()和limit()
2019/10/15 PHP
Gambit vs CL BO3 第二场 2.13
2021/03/10 DOTA
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
JavaScript Event学习第六章 事件的访问
2010/02/07 Javascript
JavaScript实现横向滑出的多级菜单效果
2015/10/09 Javascript
js操作数据库实现注册和登陆的简单实例
2016/05/26 Javascript
详解AngularJS通过ocLazyLoad实现动态(懒)加载模块和依赖
2017/03/01 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
详解express与koa中间件模式对比
2017/08/07 Javascript
windows下更新npm和node的方法
2017/11/30 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
[05:31]DOTA2英雄梦之声_第08期_莉娜
2014/06/23 DOTA
Python中的对象,方法,类,实例,函数用法分析
2015/01/15 Python
Python实现windows下模拟按键和鼠标点击的方法
2015/03/13 Python
实例讲解Python的函数闭包使用中应注意的问题
2016/06/20 Python
python try except 捕获所有异常的实例
2018/10/18 Python
解决Python找不到ssl模块问题 No module named _ssl的方法
2019/04/29 Python
使用python搭建服务器并实现Android端与之通信的方法
2019/06/28 Python
Python中__repr__和__str__区别详解
2019/11/07 Python
python 线性回归分析模型检验标准--拟合优度详解
2020/02/24 Python
python生成任意频率正弦波方式
2020/02/25 Python
django修改models重建数据库的操作
2020/03/31 Python
python 实现 hive中类似 lateral view explode的功能示例
2020/05/18 Python
Pandas中两个dataframe的交集和差集的示例代码
2020/12/13 Python
HTML5中判断用户是否正在浏览页面的方法
2014/05/03 HTML / CSS
澳大利亚优质的家居用品和生活方式公司:Bed Bath N’ Table
2019/04/16 全球购物
香奈儿美国官网:CHANEL美国
2020/05/20 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2014/07/21 面试题
班班通项目实施方案
2014/02/25 职场文书
企业诚信承诺书
2014/05/23 职场文书
2015毕业生简历自我评价
2015/03/02 职场文书