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 相关文章推荐
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
Apr 07 Javascript
silverlight线程与基于事件驱动javascript引擎(实现轨迹回放功能)
Aug 09 Javascript
js对象与打印对象分析比较
Apr 23 Javascript
SeaJS入门教程系列之完整示例(三)
Mar 03 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
javascript排序函数实现数字排序
Jun 26 Javascript
详解JavaScript基于面向对象之继承
Dec 13 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
Element Input组件分析小结
Oct 11 Javascript
jQuery动态生成的元素绑定事件操作实例分析
May 04 jQuery
js回调函数仿360开机
Dec 26 Javascript
Vue中使用better-scroll实现轮播图组件
Mar 07 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的安全策略
2006/10/09 PHP
修改php.ini以达到屏蔽错误信息并记录日志
2013/06/16 PHP
php模板引擎技术简单实现
2016/03/15 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
tp5.1 实现setInc字段自动加1
2019/10/18 PHP
jquery 模拟雅虎首页的点击对话框效果
2010/04/11 Javascript
Javascript Object.extend
2010/05/18 Javascript
js实现快速分享功能(你的文章分享工具)
2013/06/25 Javascript
ajax请求乱码的解决方法(中文乱码)
2014/04/10 Javascript
javascript的动态加载、缓存、更新以及复用(一)
2014/06/09 Javascript
JQuery选中checkbox方法代码实例(全选、反选、全不选)
2015/04/27 Javascript
浅谈js构造函数的方法与原型prototype
2016/07/04 Javascript
第一次接触神奇的Bootstrap基础排版
2016/07/26 Javascript
ReactNative页面跳转Navigator实现的示例代码
2017/08/02 Javascript
Angularjs上传图片实例详解
2017/08/06 Javascript
小程序获取周围IBeacon设备的方法
2018/10/31 Javascript
vue如何根据网站路由判断页面主题色详解
2018/11/02 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
2019/06/24 Javascript
简述ES6新增关键字let与var的区别
2019/08/23 Javascript
关于AngularJS中几种Providers的区别总结
2020/05/17 Javascript
从零学Python之入门(二)基本数据类型
2014/05/25 Python
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
python3 kmp 字符串匹配的方法
2018/07/07 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python实现的Iou与Giou代码
2020/01/18 Python
python程序输出无内容的解决方式
2020/04/09 Python
用 Python 制作地球仪的方法
2020/04/24 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
Gibson London官网:以地道的英国男装而著称
2019/12/06 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
高等教育学自荐书范文
2014/02/10 职场文书
经济类毕业生求职信
2014/06/26 职场文书
学雷锋志愿者活动方案
2014/08/21 职场文书
MySQL count(*)统计总数问题汇总
2022/09/23 MySQL