jQuery中setTimeout的几种使用方法小结


Posted in Javascript onApril 07, 2013

我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数:

<div id="div_debug"></div>
 <script src="http://www.studyday.net/demo/jquery.js"></script> 
 <script language="JavaScript"> 
 functionlog(s){ 
     $('#div_debug').append(s+'<br>'); 
 }  //下文中测试用的代码可以放在这一行注释的下面,替换掉 //... 
 //... 
 </script>

原生态 javascript 中的 setTimeout 基本用法是像这样子的.
 //原生态 javascript 中的 setTimeout 基本用法 
 functionfunA(){ 
     log('funA...'); 
     setTimeout('funA()', 1000); 
 } 
 funA();

下面是jQuery中setTimeout的几种使用方法. 在线实例

 //jQuery 中的用法 
 functionfunA(){ 
     log('funA...'); 
     setTimeout('funA()', 1000); 
 }  jQuery(document).ready(function($){ 
     //用法1 : 把要调用的函数写在ready外面,使它成为全局函数 
     funA(); 
     //用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数 
     functionfunB(){ 
         log('funB...'); 
         setTimeout(funB, 1000); 
     } 
     funB(); 
     //用法3 : 通过调用匿名函数来执行,适合有带参数的函数 
     functionfunC(v){ 
         log('funC...'+v); 
         setTimeout(function(){funC(v+1)}, 1000); 
     } 
     funC(1); 
     //用法4 : 通过在jQuery命名空间上增加函数,适用面更广 
     $.extend({ 
         funD:function(v){ 
             log('funD...'+v); 
             setTimeout("$.funD("+(v+1)+")",1000); 
         } 
     }); 
     $.funD(100); 
 });

用法2和用法3的区别很明显, 但用法3和用法4的区别在哪里呢?为什么说用法4比用法3适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

 jQuery(document).ready(function($){ 
     //用法3 : 通过调用匿名函数来执行,适合有带参数的函数 
     functionfunC(v){ 
         log('funC...'+v); 
         setTimeout(function(){funC(v+1)}, 1000); 
     }      //用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便 
     $.extend({ 
         funD:function(v){ 
             log('funD...'+v); 
             setTimeout("$.funD("+(v+1)+")",1000); 
         } 
     }); 
 }); 
 jQuery(document).ready(function($){ 
     //funC(1);   //去掉注释后执行这一句时会报错 
     $.funD(100); //这一句是正常的, 明白两者之间的区别了吧 
 });

Javascript 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
使用jQuery.fn自定义jQuery翻页插件
Jan 20 Javascript
基于JS实现弹出一个隐藏的div窗口body页面变成灰色并且不可被编辑
Dec 14 Javascript
详解在 Angular 项目中添加 clean-blog 模板
Jul 04 Javascript
jQuery条件分页 代替离线查询(附代码)
Aug 17 jQuery
jQury Ajax使用Token验证身份实例代码
Sep 22 Javascript
react-redux中connect的装饰器用法@connect详解
Jan 13 Javascript
浅谈React组件之性能优化
Mar 02 Javascript
详解JavaScript的BUG和错误
May 07 Javascript
taro小程序添加骨架屏的实现代码
Nov 15 Javascript
详解钉钉小程序组件之自定义模态框(弹窗封装实现)
Mar 07 Javascript
Selenium执行Javascript脚本参数及返回值过程详解
Apr 01 Javascript
jQuery setTimeout()函数使用方法
Apr 07 #Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 #Javascript
关于jQuery参考实例 1.0 jQuery的哲学
Apr 07 #Javascript
jQuery操作checkbox选择(list/table)
Apr 07 #Javascript
关于jQuery参考实例2.0 用jQuery选择元素
Apr 07 #Javascript
js将long日期格式转换为标准日期格式实现思路
Apr 07 #Javascript
jQuery对象数据缓存Cache原理及jQuery.data方法区别介绍
Apr 07 #Javascript
You might like
php 调用远程url的六种方法小结
2009/11/02 PHP
PHP生成条形图的方法
2014/12/10 PHP
php设计模式之策略模式实例分析【星际争霸游戏案例】
2020/03/26 PHP
基于jquery的给文章加入关键字链接
2010/10/26 Javascript
jquery获取table中的某行全部td的内容方法
2013/03/08 Javascript
JS+css 图片自动缩放自适应大小
2013/08/08 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
JS实现的文字与图片定时切换效果代码
2015/10/06 Javascript
JS实现带圆弧背景渐变效果的导航菜单代码
2015/10/13 Javascript
AngularJS表单基本操作
2017/01/09 Javascript
分分钟玩转Vue.js组件(二)
2017/03/01 Javascript
关于Javascript中document.cookie的使用
2017/03/08 Javascript
微信小程序实现收藏与取消收藏切换图片功能
2018/08/03 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
2018/10/31 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
js实现简单的打印表格
2020/01/15 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[40:03]RNG vs VG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
跟老齐学Python之有容乃大的list(1)
2014/09/14 Python
Python 3.x 新特性及10大变化
2015/06/12 Python
django框架如何集成celery进行开发
2017/05/24 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
TensorFlow tf.nn.max_pool实现池化操作方式
2020/01/04 Python
HTML5 表单验证失败的提示语问题
2017/07/13 HTML / CSS
加拿大花店:1800Flowers.ca
2016/11/16 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
Auguste The Label官网:澳大利亚一家精品女装时尚品牌
2020/06/14 全球购物
瑞士首家网上药店折扣店:McDrogerie
2020/12/22 全球购物
邮政员工辞职信
2014/01/16 职场文书
酒店经理职责
2014/01/30 职场文书
2014年纠风工作总结
2014/12/08 职场文书
民事上诉状范文
2015/05/22 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
Pytorch 使用tensor特定条件判断索引
2021/04/08 Python
超详细Python解释器新手安装教程
2021/05/10 Python
MySQL中连接查询和子查询的问题
2021/09/04 MySQL