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 相关文章推荐
prototype 源码中文说明之 prototype.js
Sep 22 Javascript
5 cool javascript apps
Mar 24 Javascript
Javascript数组的排序 sort()方法和reverse()方法
Jun 04 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
深入领悟JavaScript中的面向对象
Nov 18 Javascript
Mui使用jquery并且使用点击跳转新窗口的实例
Aug 19 jQuery
Vue 配合eiement动态路由,权限验证的方法
Sep 26 Javascript
jQuery删除/清空指定元素的所有子节点实例代码
Jul 04 jQuery
element-ui 中使用upload多文件上传只请求一次接口
Jul 19 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 Javascript
Vue清除定时器setInterval优化方案分享
Jul 21 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
Aug 11 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP5 字符串处理函数大全
2010/03/23 PHP
解决php写入数据库乱码的问题
2019/09/17 PHP
JS代码格式化和语法着色V2
2006/10/14 Javascript
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jquery异步调用页面后台方法‏(asp.net)
2011/03/01 Javascript
纯js和css实现渐变色包括静态渐变和动态渐变
2014/05/29 Javascript
JQuery用户名校验的具体实现
2016/03/18 Javascript
js将滚动条滚动到指定位置的简单实现方法
2016/06/25 Javascript
Node.js 日志处理模块log4js
2016/08/28 Javascript
深入浅析Vue组件开发
2016/11/25 Javascript
详解vue.js组件化开发实践
2016/12/14 Javascript
详解webpack分离css单独打包
2017/06/21 Javascript
实例讲解v-if和v-show的区别
2019/01/31 Javascript
Python通过future处理并发问题
2017/10/17 Python
Python3.5实现的三级菜单功能示例
2019/03/25 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python实现变声器功能(萝莉音御姐音)
2019/12/05 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python 线性回归分析以及评价指标详解
2020/04/02 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Python pexpect模块及shell脚本except原理解析
2020/08/03 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
HTML5中的拖放实现详解
2017/08/23 HTML / CSS
薇诺娜官方网上商城:专注敏感肌肤
2017/05/25 全球购物
阿根廷在线宠物商店:Puppis
2018/03/23 全球购物
就业推荐表自我鉴定
2013/10/29 职场文书
房务中心文员岗位职责
2014/04/16 职场文书
美德少年事迹材料1000字
2014/08/21 职场文书
办公室主任个人对照检查材料思想汇报
2014/10/11 职场文书
武当山导游词
2015/02/03 职场文书
幼儿教师师德师风自我评价
2015/03/05 职场文书
修改MySQL的默认密码的四种小方法
2021/05/26 MySQL
java中重写父类方法加不加@Override详解
2021/06/21 Java/Android
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript
Windows server 2012 NTP时间同步的实现
2022/06/25 Servers