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高级程序设计》阅读笔记(一) ECMAScript基础
Feb 27 Javascript
Javascript计算两个marker之间的距离(Google Map V3)
Apr 26 Javascript
jquery实现动态菜单的实例代码
Nov 28 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
复杂的javascript窗口分帧解析
Feb 19 Javascript
jquery插件uploadify多图上传功能实现代码
Aug 12 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
JS判断字符串是否为整数的方法--简单的正则判断
Jul 23 Javascript
解决vue动态为数据添加新属性遇到的问题
Sep 18 Javascript
JS中使用cavas截图网页并解决跨域及模糊问题
Nov 13 Javascript
vue实现搜索功能
May 28 Javascript
uni-app微信小程序登录并使用vuex存储登录状态的思路详解
Nov 04 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
颠覆常识!无色透明的咖啡诞生了(中日双语)
2021/03/03 咖啡文化
PHP 生成的XML以FLASH获取为乱码终极解决
2009/08/07 PHP
php在window iis的莫名问题的测试方法
2013/05/14 PHP
PHP进程同步代码实例
2015/02/12 PHP
Zend Framework自定义Helper类相关注意事项总结
2016/03/14 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
thinkphp诸多限制条件下如何getshell详解
2020/12/09 PHP
表单填写时用回车代替TAB的实现方法
2007/10/09 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
JS 数字转换研究总结
2013/12/26 Javascript
javascript实现2048游戏示例
2014/05/04 Javascript
JavaScript来实现打开链接页面的简单实例
2016/06/02 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
Bootstrap页面缩小变形的快速解决办法
2017/02/03 Javascript
微信小程序开发之麦克风动画 帧动画 放大 淡出
2017/04/18 Javascript
Express下采用bcryptjs进行密码加密的方法
2018/02/07 Javascript
create-react-app修改为多页面支持的方法
2018/05/17 Javascript
微信小程序自定义select下拉选项框组件的实现代码
2018/08/28 Javascript
angular4自定义表单控件[(ngModel)]的实现
2018/11/23 Javascript
原生js实现随机点名
2020/07/05 Javascript
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
Python中用max()方法求最大值的介绍
2015/05/15 Python
python机器学习之神经网络(三)
2017/12/20 Python
Python cookbook(数据结构与算法)保存最后N个元素的方法
2018/02/13 Python
Random 在 Python 中的使用方法
2018/08/09 Python
python网络编程 使用UDP、TCP协议收发信息详解
2019/08/29 Python
Python打包模块wheel的使用方法与将python包发布到PyPI的方法详解
2020/02/12 Python
匈牙利墨盒和碳粉购买网站:CDRmarket
2018/04/14 全球购物
北大研究生linux应用求职信
2013/10/29 职场文书
工程总经理工作职责
2013/12/09 职场文书
党员学习中共十八大报告思想汇报
2014/09/15 职场文书
2014年党建工作汇报材料
2014/10/27 职场文书
检讨书格式范文
2015/05/07 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书