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 相关文章推荐
简单JS代码压缩器
Oct 12 Javascript
jQuery入门知识简介
Mar 04 Javascript
javascript 进阶篇3 Ajax 、JSON、 Prototype介绍
Mar 14 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
代码获取历史上的今天发生的事
Apr 11 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
javascript实现数组中的内容随机输出
Aug 11 Javascript
使用UrlConnection实现后台模拟http请求的简单实例
Jan 04 Javascript
原生JS+CSS实现炫酷重力模拟弹跳系统的登录页面
Nov 01 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
promise和co搭配生成器函数方式解决js代码异步流程的比较
May 25 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生成的html meta和link标记在body标签里 顶部有个空行
2010/05/18 PHP
ajax取消挂起请求的处理方法
2013/03/18 PHP
PHP 数组和字符串互相转换实现方法
2013/03/26 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
Laravel 中使用 Vue.js 实现基于 Ajax 的表单提交错误验证操作
2017/06/30 PHP
PHP流Streams、包装器wrapper概念与用法实例详解
2017/11/17 PHP
基于javascript的JSON格式页面展示美化方法
2014/07/02 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
javascript格式化日期时间方法汇总
2015/06/19 Javascript
使用jquery实现鼠标滑过弹出更多相关信息层附源码下载
2015/11/23 Javascript
jQuery插件实现可输入和自动匹配的下拉框
2016/10/24 Javascript
基于JavaScript实现弹幕特效
2020/08/27 Javascript
JS实现的将html转为pdf功能【基于浏览器端插件jsPDF】
2018/02/06 Javascript
Vue-component全局注册实例
2018/09/06 Javascript
Javascript数组方法reduce的妙用之处分享
2019/06/10 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
js设置默认时间跨度过程详解
2019/07/17 Javascript
package.json各个属性说明详解
2020/03/11 Javascript
Python标准库之多进程(multiprocessing包)介绍
2014/11/25 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python爬虫设置代理IP(图文)
2018/12/23 Python
详解用Python练习画个美队盾牌
2019/03/23 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
python 监测内存和cpu的使用率实例
2019/11/28 Python
django admin 添加自定义链接方式
2020/03/11 Python
PyTorch在Windows环境搭建的方法步骤
2020/05/12 Python
python实现批量命名照片
2020/06/18 Python
CSS3美化表单控件全集
2016/06/29 HTML / CSS
Get The Label中文官网:英国运动时尚购物平台
2017/04/19 全球购物
德国家用电器购物网站:Premiumshop24
2019/08/22 全球购物
Jdbc数据访问技术面试题
2012/03/30 面试题
小区门卫管理制度
2014/01/29 职场文书
节约电力资源的建议书
2014/03/12 职场文书
岳庙导游词
2015/02/04 职场文书
论文答辩开场白大全
2015/05/27 职场文书
MySQL 主从复制数据不一致的解决方法
2022/03/18 MySQL