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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
了解一点js的Eval函数
Jul 26 Javascript
JQuery入门—编写一个简单的JQuery应用案例
Jan 03 Javascript
你必须知道的Javascript知识点之"this指针"的应用
Apr 23 Javascript
深入分析javascript中的错误处理机制
Jul 17 Javascript
原生js封装的一些jquery方法(详解)
Sep 20 Javascript
提高JavaScript执行效率的23个实用技巧
Mar 01 Javascript
Angular.js中控制器之间的传值详解
Apr 24 Javascript
JavaScript算法教程之sku(库存量单位)详解
Jun 29 Javascript
tween.js缓动补间动画算法示例
Feb 13 Javascript
在layui tab控件中载入外部html页面的方法
Sep 04 Javascript
js实现带有动画的返回顶部
Aug 09 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
IIS php环境配置PHP5 MySQL5 ZendOptimizer phpmyadmin安装与配置
2008/11/18 PHP
php实现mysql数据库操作类分享
2014/02/14 PHP
php猜单词游戏
2015/09/29 PHP
laravel5.1框架model类查询的实现方法
2019/10/08 PHP
JavaScript QueryString解析类代码
2010/01/17 Javascript
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
2010/03/21 Javascript
JavaScript中的noscript元素属性位置及作用介绍
2013/04/11 Javascript
JavaScript匿名函数用法分析
2015/02/13 Javascript
Javascript无参数和有参数类继承问题解决方法
2015/03/02 Javascript
javascript实现textarea中tab键的缩排处理方法
2015/06/26 Javascript
不依赖Flash和任何JS库实现文本复制与剪切附源码下载
2015/10/09 Javascript
js验证身份证号有效性并提示对应信息
2015/10/19 Javascript
js 声明数组和向数组中添加对象变量的简单实例
2016/07/28 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
代码详解Vuejs响应式原理
2017/12/20 Javascript
vue 项目中使用Loading组件的示例代码
2018/08/31 Javascript
vuejs中监听窗口关闭和窗口刷新事件的方法
2018/09/21 Javascript
超详细的5个Shell脚本实例分享(值得收藏)
2019/08/15 Javascript
Angular8 简单表单验证的实现示例
2020/06/03 Javascript
Python调用C++程序的方法详解
2017/01/24 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Django中create和save方法的不同
2019/08/13 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
pyinstaller将含有多个py文件的python程序做成exe
2020/04/29 Python
python如何支持并发方法详解
2020/07/25 Python
python3实现简单飞机大战
2020/11/29 Python
使用CSS媒体查询(Media Queries)和JavaScript判断浏览器设备类型的方法
2014/04/03 HTML / CSS
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
Speedo美国:澳大利亚顶尖泳衣制造商
2016/08/03 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
英国邮购活的植物主要供应商:Gardening Direct
2019/01/28 全球购物
员工保密承诺书
2014/05/28 职场文书
2015年高校教师个人工作总结
2015/05/25 职场文书
毕业论文答辩开场白
2015/05/27 职场文书
2016庆祝国庆67周年宣传语
2015/11/25 职场文书
MySQL 存储过程的优缺点分析
2021/05/20 MySQL