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 Select标记中options操作方法集合
Oct 22 Javascript
js string 转 int 注意的问题小结
Aug 15 Javascript
jQuery中unbind()方法用法实例
Jan 19 Javascript
jquery实现LED广告牌旋转系统图片切换效果代码分享
Aug 26 Javascript
Vue动态实现评分效果
May 24 Javascript
利用Angular.js编写公共提示模块的方法教程
May 28 Javascript
详解Angular 自定义结构指令
Jun 21 Javascript
vue实现tab切换外加样式切换方法
Mar 16 Javascript
浅析vue-router实现原理及两种模式
Feb 11 Javascript
jquery实现直播视频弹幕效果
Feb 25 jQuery
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
vue el-table实现递归嵌套的示例代码
Aug 14 Vue.js
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中的MYSQL常用函数(php下操作数据库必备)
2010/09/12 PHP
php的array_multisort()使用方法介绍
2012/05/16 PHP
php实现按照权重随机排序数据的方法
2015/01/09 PHP
使用PHP编写发红包程序
2015/07/22 PHP
总结PHP代码规范、流程规范、git规范
2018/06/18 PHP
PHP simplexml_load_string()函数实例讲解
2019/02/03 PHP
DWR实现模拟Google搜索效果实现原理及代码
2013/01/30 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
js history对象简单实现返回和前进
2013/10/30 Javascript
javascript学习笔记(二)数组和对象部分
2014/09/30 Javascript
Jquery实现仿腾讯微博发表广播
2014/11/17 Javascript
jQuery实现自定义右键菜单的树状菜单效果
2015/09/02 Javascript
javascript同步服务器时间和同步倒计时小技巧
2015/09/24 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript实现多种排序算法
2016/02/24 Javascript
jQuery插件EasyUI设置datagrid的checkbox为禁用状态的方法
2016/08/05 Javascript
浅谈js原生拖放
2016/11/21 Javascript
jQuery电话号码验证实例
2017/01/05 Javascript
React中使用外部样式的3种方式(小结)
2019/05/28 Javascript
javascript canvas实现简易时钟例子
2020/09/05 Javascript
Python使用numpy实现BP神经网络
2018/03/10 Python
python实现两个文件夹的同步
2019/08/29 Python
flask 使用 flask_apscheduler 做定时循环任务的实现
2019/12/10 Python
你应该知道的Python3.6、3.7、3.8新特性小结
2020/05/12 Python
python里的单引号和双引号的有什么作用
2020/06/17 Python
python如何构建mock接口服务
2021/01/28 Python
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
美国办公用品折扣网站:Shoplet.com
2019/11/24 全球购物
超市业务员岗位职责
2013/12/05 职场文书
秘书行业自我鉴定范文
2013/12/30 职场文书
会计岗位描述
2014/02/22 职场文书
医德医魂心得体会
2014/09/11 职场文书
村干部任职承诺书
2015/01/21 职场文书
小学教师自我评价
2015/03/04 职场文书
python 如何做一个识别率百分百的OCR
2021/05/29 Python
Vue的生命周期一起来看看
2022/02/24 Vue.js