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 相关文章推荐
js中的值类型和引用类型小结 文字说明与实例
Dec 12 Javascript
不使用ajax实现无刷新提交表单
Dec 21 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jQuery实现在下拉列表选择时获取json数据的方法
Apr 16 Javascript
jquery滚动特效集锦
Jun 03 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
Apr 27 Javascript
javaScript+turn.js实现图书翻页效果实例代码
Feb 16 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
centos 上快速搭建ghost博客方法分享
May 23 Javascript
vue+springboot实现项目的CORS跨域请求
Sep 05 Javascript
详解datagrid使用方法(重要)
Nov 06 Javascript
微信小程序自定义胶囊样式
Dec 27 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
thinkPHP的Html模板标签使用方法
2012/11/13 PHP
php MessagePack介绍
2013/10/06 PHP
PHP中使用BigMap实例
2015/03/30 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
php设计模式之享元模式分析【星际争霸游戏案例】
2020/03/23 PHP
浅析jQuery的链式调用之each函数
2010/12/03 Javascript
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
2013/09/18 Javascript
图文详解Javascript中的上下文和作用域
2017/02/15 Javascript
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
JS实现简单表格排序操作示例
2017/10/07 Javascript
详解Vue webapp项目通过HBulider打包原生APP(vue+webpack+HBulider)
2019/02/02 Javascript
详解vue 2.6 中 slot 的新用法
2019/07/09 Javascript
JavaScript中break、continue和return的用法区别实例分析
2020/03/02 Javascript
Django实现图片文字同时提交的方法
2015/05/26 Python
使用Python解析JSON数据的基本方法
2015/10/15 Python
Python类的继承和多态代码详解
2017/12/27 Python
python使用Plotly绘图工具绘制散点图、线形图
2019/04/02 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
解决Python import docx出错DLL load failed的问题
2020/02/13 Python
html5实现canvas阴影效果示例
2014/05/07 HTML / CSS
美国奢侈品在线团购网站:Gilt City
2017/11/16 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
编写strcpy函数
2014/06/24 面试题
移动通信专业自荐信范文
2013/11/12 职场文书
学生就业推荐信
2013/11/13 职场文书
夜不归宿检讨书
2014/02/25 职场文书
安全教育感言
2014/03/04 职场文书
银行服务明星推荐材料
2014/05/29 职场文书
护士长2014年度工作总结
2014/11/11 职场文书
2015元旦联欢晚会结束语
2014/12/14 职场文书
横空出世观后感
2015/06/09 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书
高中优秀作文(范文)
2019/08/15 职场文书
MySQL 常见的数据表设计误区汇总
2021/06/07 MySQL
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL