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 相关文章推荐
重定向实现代码
Nov 20 Javascript
HTML页面登录时的JS验证方法
May 28 Javascript
Javascript非构造函数的继承
Apr 27 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
谈谈JavaScript类型系统之Math
Jan 06 Javascript
javascript插件开发的一些感想和心得
Feb 28 Javascript
js实现精确到秒的倒计时效果
May 29 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
详解webpack介绍&安装&常用命令
Jun 29 Javascript
JS倒计时实例_天时分秒
Aug 22 Javascript
vue代码分割的实现(codesplit)
Nov 13 Javascript
ES11屡试不爽的新特性,你用上了几个
Oct 21 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 db类库进行数据库操作
2009/03/19 PHP
PHP Document 代码注释规范
2009/04/13 PHP
php快速排序原理与实现方法分析
2016/05/26 PHP
js面向对象设计用{}好还是function(){}好(构造函数)
2011/10/23 Javascript
Jquery阻止事件冒泡 event.stopPropagation
2011/12/11 Javascript
javascript转换静态图片,增加粒子动画效果
2015/05/28 Javascript
JavaScript使用forEach()与jQuery使用each遍历数组时return false 的区别
2016/08/26 Javascript
BootStrap入门教程(一)之可视化布局
2016/09/19 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
ES6正则的扩展实例详解
2017/04/25 Javascript
react开发教程之React 组件之间的通信方式
2017/08/12 Javascript
vue实现商城购物车功能
2017/11/27 Javascript
js中apply()和call()的区别与用法实例分析
2018/08/14 Javascript
Angular+ionic实现折叠展开效果的示例代码
2020/07/29 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
利用Python读取txt文档的方法讲解
2018/06/23 Python
对dataframe数据之间求补集的实例详解
2019/01/30 Python
python 3.7.4 安装 opencv的教程
2019/10/10 Python
python二元表达式用法
2019/12/04 Python
浅谈python累加求和+奇偶数求和_break_continue
2020/02/25 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
浅谈Selenium+Webdriver 常用的元素定位方式
2021/01/13 Python
ZWILLING双立人法国网上商店:德国刀具锅具厨具品牌
2019/08/28 全球购物
2014旅游局领导班子四风问题对照检查材料思想汇报
2014/09/19 职场文书
刑事辩护授权委托书格式
2014/10/13 职场文书
高三语文复习计划
2015/01/19 职场文书
民间借贷借条范本
2015/05/25 职场文书
付款证明格式范文
2015/06/19 职场文书
小学生暑假安全公约
2015/07/14 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏
Python 全局空间和局部空间
2022/04/06 Python
Vue Element plus使用方法梳理
2022/12/24 Vue.js