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 相关文章推荐
初探jquery——表单应用范例
Feb 20 Javascript
学习并汇集javascript匿名函数
Nov 25 Javascript
jQuery中setTimeout的几种使用方法小结
Apr 07 Javascript
JavaScript中为什么null==0为false而null大于=0为true(个人研究)
Sep 16 Javascript
jquery简单实现鼠标经过导航条改变背景图
Dec 17 Javascript
JavaScript实现跨浏览器的添加及删除事件绑定函数实例
Aug 04 Javascript
js关于getImageData跨域问题的解决方法
Oct 14 Javascript
js 原型对象和原型链理解
Feb 09 Javascript
BootStrap数据表格实例代码
Sep 13 Javascript
如何基于JS截获动态代码
Dec 25 Javascript
jQuery实现移动端笔触canvas电子签名
May 21 jQuery
Vue如何跨组件传递Slot的实现
Dec 14 Vue.js
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
PHP开发负载均衡指南
2010/07/17 PHP
ThinkPHP中redirect用法分析
2014/12/05 PHP
php实现的XML操作(读取)封装类完整实例
2017/02/23 PHP
laravel项目利用twemproxy部署redis集群的完整步骤
2018/05/11 PHP
PHP使用PDO、mysqli扩展实现与数据库交互操作详解
2019/07/20 PHP
关于javascript document.createDocumentFragment()
2009/04/04 Javascript
详细讲解JS节点知识
2010/01/31 Javascript
让复选框只能选择一项的方法
2013/10/08 Javascript
instanceof和typeof运算符的区别详解
2014/01/06 Javascript
jquery实现的美女拼图游戏实例
2015/05/04 Javascript
jQuery自动添加表单项的方法
2015/07/13 Javascript
VUEJS实战之修复错误并且美化时间(2)
2016/06/13 Javascript
JS 面向对象之继承---多种组合继承详解
2016/07/10 Javascript
浅析JS中的 map, filter, some, every, forEach, for in, for of 用法总结
2017/03/29 Javascript
React Native实现进度条弹框的示例代码
2017/07/17 Javascript
基于javaScript的this指向总结
2017/07/22 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
微信小程序radio组件使用详解
2018/01/31 Javascript
基于vue-cli 打包时抽离项目相关配置文件详解
2018/03/07 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
JS中的模糊查询功能
2019/12/08 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
2020/11/05 Javascript
Python实现PS图像调整黑白效果示例
2018/01/25 Python
python3利用tcp实现文件夹远程传输
2018/07/28 Python
Python实现简单的列表冒泡排序和反转列表操作示例
2019/07/10 Python
python中如何使用insert函数
2020/01/09 Python
Python3+selenium实现cookie免密登录的示例代码
2020/03/18 Python
HTML5 和小程序实现拍照图片旋转、压缩和上传功能
2018/10/08 HTML / CSS
GOLFINO英国官网:高尔夫服装
2020/04/11 全球购物
J2EE相关知识面试题
2013/08/26 面试题
遗体告别仪式主持词
2014/03/20 职场文书
毕业班联欢会主持词
2014/03/27 职场文书
日语专业求职信
2014/07/04 职场文书
国际残疾人日广播稿范文
2014/10/09 职场文书
教师节班会开场白
2015/06/01 职场文书
礼仪培训心得体会
2016/01/22 职场文书