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 相关文章推荐
JavaScript 动态创建VML的方法
Oct 14 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
jQuery深拷贝Json对象简单示例
Jul 06 Javascript
使用Require.js封装原生js轮播图的实现代码
Jun 15 Javascript
jQuery封装placeholder效果实现方法,让低版本浏览器支持该效果
Jul 08 jQuery
详解VueRouter进阶之导航钩子和路由元信息
Sep 13 Javascript
解决Vue+Element ui开发中碰到的IE问题
Sep 03 Javascript
JavaScript中AOP的实现与应用
May 06 Javascript
深度解读vue-resize的具体用法
Jul 08 Javascript
vue select 获取value和lable操作
Aug 28 Javascript
js实现日历
Nov 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 仿Comsenz安装效果代码打包提供下载
2010/05/09 PHP
smarty基础之拼接字符串的详解
2013/06/18 PHP
关于url地址传参数时字符串有回车造成页面脚本赋值失败的解决方法
2013/06/28 PHP
php三维数组去重(示例代码)
2013/11/26 PHP
php操作XML、读取数据和写入数据的实现代码
2014/08/15 PHP
php程序员应具有的7种能力小结
2014/11/27 PHP
js url传值中文乱码之解决之道
2009/11/20 Javascript
JQuery.closest(),parent(),parents()寻找父结点
2012/02/17 Javascript
简单的js表单验证函数
2013/10/28 Javascript
jQuery UI插件自定义confirm确认框的方法
2015/03/20 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
javascript简单实现类似QQ头像弹出效果的方法
2015/08/03 Javascript
jQuery实现鼠标双击Table单元格变成文本框及输入内容后更新到数据库的方法
2015/11/25 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
js实现文字跑马灯效果
2017/02/23 Javascript
vue的Virtual Dom实现snabbdom解密
2017/05/03 Javascript
vue组件间通信子与父详解(二)
2017/11/07 Javascript
让Vue也可以使用Redux的方法
2018/05/23 Javascript
使用RN Animated做一个“添加购物车”动画的方法
2018/09/12 Javascript
小程序兼容安卓和IOS数据处理问题及坑
2018/09/18 Javascript
vue-cli V3.0版本的使用详解
2018/10/24 Javascript
JS数组的常用10种方法详解
2020/05/08 Javascript
[10:54]Team Spirit vs Navi
2018/06/07 DOTA
python 定时修改数据库的示例代码
2018/04/08 Python
由Python编写的MySQL管理工具代码实例
2019/04/09 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
如何将PySpark导入Python的放实现(2种)
2020/04/26 Python
使用索引(Index)有哪些需要考虑的因素
2016/10/19 面试题
打造完美自荐信
2014/01/24 职场文书
旅游管理毕业生自荐书
2014/02/02 职场文书
单位委托书
2014/10/15 职场文书
《学会生存》读后感3篇
2019/12/09 职场文书
教你用Python写一个植物大战僵尸小游戏
2021/04/25 Python
PostgreSQL通过oracle_fdw访问Oracle数据的实现步骤
2021/05/21 PostgreSQL
安装harbor作为docker镜像仓库的问题
2022/06/14 Servers