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用于查询操作的实现代码
May 10 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
深入理解JavaScript系列(3) 全面解析Module模式
Jan 15 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
jQuery实现鼠标经过事件的延时处理效果
Aug 20 Javascript
全面解析Bootstrap中tooltip、popover的使用方法
Jun 13 Javascript
Angularjs实现带查找筛选功能的select下拉框示例代码
Oct 04 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 Javascript
图文详解vue框架安装步骤
Feb 12 Javascript
vue工程全局设置ajax的等待动效的方法
Feb 22 Javascript
vue 通过base64实现图片下载功能
Dec 19 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
重料打造自己的“宝马”---第三代
2021/03/02 无线电
PHP新手上路(七)
2006/10/09 PHP
php在线打包程序源码
2008/07/27 PHP
PHP 正则判断中文UTF-8或GBK的思路及具体实现
2013/11/26 PHP
phpmyadmin出现Cannot start session without errors问题解决方法
2014/08/14 PHP
postfixadmin忘记密码后的修改密码方法详解
2016/07/20 PHP
PHP 应用容器化以及部署方法
2018/02/12 PHP
jQuery实现动画效果的实例代码
2013/05/07 Javascript
禁用JavaScript控制台调试的方法
2014/03/07 Javascript
Kindeditor在线文本编辑器如何过滤HTML
2016/04/14 Javascript
全面了解JS中的匿名函数
2016/06/29 Javascript
HTML中使背景图片自适应浏览器大小实例详解
2017/04/06 Javascript
JS实现随机抽取三人
2019/11/06 Javascript
javascript设计模式 ? 组合模式原理与应用实例分析
2020/04/14 Javascript
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python实现生成随机日期字符串的方法示例
2017/12/25 Python
python将print输出的信息保留到日志文件中
2019/09/27 Python
python绘制规则网络图形实例
2019/12/09 Python
VS2019+python3.7+opencv4.1+tensorflow1.13配置详解
2020/04/16 Python
Python通过类的组合模拟街道红绿灯
2020/09/16 Python
宝拉珍选澳大利亚官方购物网站:Paula’s Choice澳大利亚
2016/09/13 全球购物
英国美发和美容产品商城:HQhair
2019/02/08 全球购物
Airbnb爱彼迎官网:成为爱彼迎房东,赚取收入
2019/03/14 全球购物
泰国第一在线超市:Tops
2021/02/13 全球购物
父亲的菜园教学反思
2014/02/13 职场文书
毕业自我鉴定怎么写
2014/03/25 职场文书
新闻工作者先进事迹
2014/05/26 职场文书
大学生第一学年自我鉴定2015
2014/09/28 职场文书
党的群众路线教育实践活动领导班子整改措施
2014/10/28 职场文书
2014年内勤工作总结
2014/11/24 职场文书
2015年办公室主任工作总结
2015/04/09 职场文书
2016七夕情人节感言
2015/12/09 职场文书
2019财务管理制度最新范本!
2019/07/09 职场文书
经典励志格言:每日一句,让你每天充满能量
2019/08/16 职场文书
jquery插件实现代码雨特效
2021/04/24 jQuery
Linux中文件的基本属性介绍
2022/06/01 Servers