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 相关文章推荐
用JavaScript获取网页中的js、css、Flash等文件
Dec 20 Javascript
Extjs中ComboBox加载并赋初值的实现方法
Mar 22 Javascript
jquery实现图片左右间隔滚动特效(可自动播放)
May 08 Javascript
javascript和jquery实现设置和移除文本框默认值效果代码
Jan 13 Javascript
jquery实现两个图片渐变切换效果的方法
Jun 25 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
jQuery+PHP+MySQL二级联动下拉菜单实例讲解
Oct 27 Javascript
Vue.js实现一个自定义分页组件vue-paginaiton
Sep 05 Javascript
如何学JavaScript?前辈的经验之谈
Dec 28 Javascript
JavaScript调试的多个必备小Tips
Jan 15 Javascript
angular select 默认值设置方法
Jun 23 Javascript
关于JavaScript中异步/等待的用法与理解
Nov 18 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
smarty模板嵌套之include与fetch性能测试
2010/12/05 PHP
开启CURL扩展,让服务器支持PHP curl函数(远程采集)
2011/03/19 PHP
php读取excel文件的简单实例
2013/08/26 PHP
Yii框架在页面输出执行sql语句以方便调试的实现方法
2014/12/24 PHP
php实现源代码加密的方法
2015/07/11 PHP
PHP实现文件上传下载实例
2016/10/18 PHP
tp5.1 框架数据库高级查询技巧实例总结
2020/05/25 PHP
用YUI做了个标签浏览效果
2007/02/20 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
ajax提交表单实现网页无刷新注册示例
2014/05/08 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
jQuery幻灯片带缩略图轮播效果代码分享
2015/08/17 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
AngularJS 验证码60秒倒计时功能的实现
2017/06/05 Javascript
vue首次赋值不触发watch的解决方法
2018/09/11 Javascript
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
简单了解Ajax表单序列化的实现方法
2019/06/14 Javascript
微信小程序实现通讯录列表展开收起
2020/11/18 Javascript
[02:21]DOTA2英雄基础教程 蝙蝠骑士
2013/12/16 DOTA
简单实现python聊天程序
2018/04/01 Python
Python3实现的旋转矩阵图像算法示例
2019/04/03 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
Python+OpenCV+图片旋转并用原底色填充新四角的例子
2019/12/12 Python
Python 元组拆包示例(Tuple Unpacking)
2019/12/24 Python
pytorch中获取模型input/output shape实例
2019/12/30 Python
解决jupyter运行pyqt代码内核重启的问题
2020/04/16 Python
CSS3 box-shadow属性实例详解
2020/06/19 HTML / CSS
canvas实现有递增动画的环形进度条的实现方法
2019/07/10 HTML / CSS
英国领先的票务代理商之一:The Ticket Factory
2019/02/09 全球购物
zooplus意大利:在线宠物商店
2019/08/07 全球购物
《一本男孩子必读的书》教学反思
2014/02/19 职场文书
大学共青团员个人自我评价
2014/04/16 职场文书
教师党员群众路线教育实践活动心得体会
2014/11/04 职场文书
详解盒子端CSS动画性能提升
2021/05/24 HTML / CSS