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 相关文章推荐
IE浏览器兼容Firefox的JS脚本的代码
Oct 23 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
JavaScript 字符串数字左补位,右补位,取固定长度,截位扩展函数代码
Mar 25 Javascript
详解react-router4 异步加载路由两种方法
Sep 12 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
详解如何在微信小程序开发中正确的使用vant ui组件
Sep 13 Javascript
axios对请求各种异常情况处理的封装方法
Sep 25 Javascript
JS实现带阴历的日历功能详解
Jan 24 Javascript
Vue动态路由缓存不相互影响的解决办法
Feb 19 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Vue自定义指令结合阿里云OSS优化图片的实现方法
Nov 12 Javascript
小程序wx.getUserProfile接口的具体使用
Jun 02 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文件去掉PHP注释空格的函数分析(PHP代码压缩)
2013/07/02 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
Laravel实现ORM带条件搜索分页
2019/10/24 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
屏蔽网页右键复制和ctrl+c复制的js代码
2013/01/04 Javascript
JavaScript DOM 编程艺术(第2版)读书笔记(JavaScript的最佳实践)
2013/10/01 Javascript
JS的事件绑定深入认识
2014/06/26 Javascript
15个jquery常用方法、小技巧分享
2015/01/13 Javascript
JS获取图片高度宽度的方法分享
2015/04/17 Javascript
javascript鼠标滑动评分控件完整实例
2015/05/13 Javascript
18个非常棒的jQuery代码片段
2015/11/02 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
JavaScript中Math对象的方法介绍
2017/01/05 Javascript
微信小程序页面传值实例分析
2017/04/19 Javascript
Node.js实现注册邮箱激活功能的方法示例
2018/03/23 Javascript
vue中的mvvm模式讲解
2019/01/31 Javascript
微信实现自动跳转到用其他浏览器打开指定APP下载
2019/02/15 Javascript
详解Angular Karma测试的持续集成实践
2019/11/15 Javascript
vue addRoutes路由动态加载操作
2020/08/04 Javascript
python3 shelve模块的详解
2017/07/08 Python
不到20行代码用Python做一个智能聊天机器人
2019/04/19 Python
Python tkinter界面实现历史天气查询的示例代码
2020/08/23 Python
移动端Html5页面生成图片解决方案
2018/08/07 HTML / CSS
世界上第一个创建了罩杯系统的美国内衣品牌:Maidenform
2019/03/23 全球购物
超级英雄、电影和电视、乐队和音乐T恤:Loud Clothing
2019/09/01 全球购物
日本整理专家Marie Kondo的官方在线商店:KonMari
2020/06/29 全球购物
法学专业应届生求职信
2013/10/16 职场文书
六查六看自查材料
2014/02/17 职场文书
高中升旗仪式演讲稿
2014/09/09 职场文书
2014年仓库工作总结
2014/11/20 职场文书
团员自我评价范文
2015/03/10 职场文书
老兵退伍感言
2015/08/03 职场文书
礼貌问候语大全
2015/11/10 职场文书
MySQL入门命令之函数-单行函数-流程控制函数
2021/04/05 MySQL
Python图像处理库PIL详细使用说明
2022/04/06 Python