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之通用简单的table选项卡实现(二)
May 09 Javascript
Ext 今日学习总结
Sep 19 Javascript
JS调用页面表格导出excel示例代码
Mar 18 Javascript
jquery checkbox无法用attr()二次勾选问题的解决方法
Jul 22 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
Mar 15 Javascript
jQuery:unbind方法的使用详解
Aug 14 jQuery
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
JS实现的简单拖拽购物车功能示例【附源码下载】
Jan 03 Javascript
微信小程序地图(map)组件点击(tap)获取经纬度的方法
Jan 10 Javascript
vue.js 打包时出现空白页和路径错误问题及解决方法
Jun 26 Javascript
基于JavaScript实现留言板功能
Mar 16 Javascript
Vue结合路由配置递归实现菜单栏功能
Jun 16 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
PHP新手上路(十四)
2006/10/09 PHP
其他功能
2006/10/09 PHP
PHP 面向对象实现代码
2009/11/11 PHP
php简单实现单态设计模式的方法分析
2017/07/28 PHP
javascript验证身份证完全方法具体实现
2013/11/18 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
引用其它js时如何同时处理多个window.onload事件
2014/09/02 Javascript
运用jQuery定时器的原理实现banner图片切换
2014/10/22 Javascript
SeaJS 与 RequireJS 的差异对比
2014/12/08 Javascript
JavaScript和JQuery的鼠标mouse事件冒泡处理
2015/06/19 Javascript
详解JavaScript中的客户端消息框架设计原理
2015/06/24 Javascript
jquery模拟实现鼠标指针停止运动事件
2016/01/12 Javascript
基于Javascript倒计时效果
2016/12/22 Javascript
原生js轮播(仿慕课网)
2017/02/15 Javascript
微信小程序图片横向左右滑动案例
2017/05/19 Javascript
利用Vue的v-for和v-bind实现列表颜色切换
2020/07/17 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
Python实现身份证号码解析
2015/09/01 Python
Python 中 list 的各项操作技巧
2017/04/13 Python
浅谈python import引入不同路径下的模块
2017/07/11 Python
python编程羊车门问题代码示例
2017/10/25 Python
解决pycharm界面不能显示中文的问题
2018/05/23 Python
浅谈python中拼接路径os.path.join斜杠的问题
2018/10/23 Python
50行Python代码获取高考志愿信息的实现方法
2019/07/23 Python
使用Python函数进行模块化的实现
2019/11/15 Python
天网工程实施方案
2014/03/26 职场文书
教师对学生的评语
2014/04/28 职场文书
社会实践活动总结报告
2014/04/29 职场文书
计算机毕业生求职信
2014/06/10 职场文书
债务纠纷委托书范本
2014/10/14 职场文书
刘公岛导游词
2015/02/05 职场文书
2015年八一建军节活动总结
2015/03/20 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
一文搞懂Golang 时间和日期相关函数
2021/12/06 Golang
Win11黑色桌面背景怎么办?Win11黑色壁纸解决方法汇总
2022/04/05 数码科技