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 相关文章推荐
Jquery搜索父元素操作方法
Feb 10 Javascript
JavaScript头像上传插件源码分享
Mar 29 Javascript
Vue.js中数组变动的检测详解
Oct 12 Javascript
详解React-Todos入门例子
Nov 08 Javascript
简单实现Bootstrap标签页
Aug 09 Javascript
微信小程序实现全国机场索引列表
Jan 31 Javascript
Vue不能检测到Object/Array更新的情况的解决
Jun 26 Javascript
小程序实现列表多个批量倒计时
Jan 29 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Vue中点击active并第一个默认选中功能的实现
Feb 24 Javascript
Js on及addEventListener原理用法区别解析
Jul 11 Javascript
vue脚手架项目创建步骤详解
Mar 02 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
咖啡因含量是由谁决定的?低因咖啡怎么来?低因咖啡适合什么人喝
2021/03/06 新手入门
php中截取字符串支持utf-8
2007/01/18 PHP
浅析php中常量,变量的作用域和生存周期
2013/08/10 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
2010/11/11 Javascript
JavaScript(js)设置默认输入焦点(focus)
2012/12/28 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
2013/06/19 Javascript
Javascript基础知识(一)核心基础语法与事件模型
2014/09/29 Javascript
Summernote实现图片上传功能的简单方法
2016/07/11 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
jQuery验证表单格式的使用方法
2017/01/10 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
微信小程序滚动Tab实现左右可滑动切换
2017/08/17 Javascript
记录一篇关于redux-saga的基本使用过程
2018/08/18 Javascript
vue 搭建后台系统模块化开发详解
2019/05/01 Javascript
Vue 利用指令实现禁止反复发送请求的两种方法
2019/09/15 Javascript
vue.js循环radio的实例
2019/11/07 Javascript
利用Python的Twisted框架实现webshell密码扫描器的教程
2015/04/16 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Python寻找两个有序数组的中位数实例详解
2018/12/05 Python
django之静态文件 django 2.0 在网页中显示图片的例子
2019/07/28 Python
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
2020/06/01 HTML / CSS
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
婴儿地球:Baby Earth
2018/12/25 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
矫正人员思想汇报
2014/01/08 职场文书
自主招生自荐信指南
2014/02/04 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
大学中国梦演讲稿
2014/04/23 职场文书
大学生考试作弊检讨书
2014/09/21 职场文书
2015年会计年终工作总结
2015/05/26 职场文书
2015迎新晚会开场白
2015/05/29 职场文书
Python基础之赋值,浅拷贝,深拷贝的区别
2021/04/30 Python
Java8 CompletableFuture 异步回调
2022/04/28 Java/Android