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 密码强弱度检测万能插件
Feb 25 Javascript
jquery获取div宽度的实现思路与代码
Jan 13 Javascript
深入理解JSON数据源格式
Jan 10 Javascript
Node.js的Express框架使用上手指南
Mar 12 Javascript
浅析Javascript ES6中的原生Promise
Aug 25 Javascript
BootStrap Fileinput插件和Bootstrap table表格插件相结合实现文件上传、预览、提交的导入Excel数据操作步骤
Aug 07 Javascript
不得不看之JavaScript构造函数及new运算符
Aug 21 Javascript
js使用原型对象(prototype)需要注意的地方
Aug 28 Javascript
基于javascript中的typeof和类型判断(详解)
Oct 27 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 Javascript
使用vue-element-admin框架从后端动态获取菜单功能的实现
Apr 29 Vue.js
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
建立动态的WML站点(二)
2006/10/09 PHP
PHP编写登录验证码功能 附调用方法
2016/05/19 PHP
PHP编程实现csv文件导入mysql数据库的方法
2017/04/29 PHP
php打开本地exe程序,js打开本地exe应用程序,并传递相关参数方法
2018/02/06 PHP
PHP实现数组和对象的相互转换操作示例
2019/03/20 PHP
javascript省市级联功能实现方法实例详解
2015/10/20 Javascript
分享一个插件实现水珠自动下落效果
2016/06/01 Javascript
jQuery操作css样式
2017/05/15 jQuery
angularjs之$timeout指令详解
2017/06/13 Javascript
ES6中javascript实现函数绑定及类的事件绑定功能详解
2017/11/08 Javascript
weebox弹出窗口不居中显示的解决方法
2017/11/27 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
jQuery+vue.js实现的多选下拉列表功能示例
2019/01/15 jQuery
js 实现 list转换成tree的方法示例(数组到树)
2019/08/18 Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
2020/09/11 Javascript
JavaScript如何实现防止重复的网络请求的示例
2021/01/28 Javascript
python中的五种异常处理机制介绍
2014/09/02 Python
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python在信息学竞赛中的运用及Python的基本用法(详解)
2017/08/15 Python
Python3内置模块之json编解码方法小结【推荐】
2020/12/09 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
html5教程实现Photoshop渐变色效果
2013/12/04 HTML / CSS
东南亚排名第一的服务市场:kaodim
2019/03/28 全球购物
技校毕业生的自我评价
2013/12/27 职场文书
应用英语专业自荐信
2014/01/26 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
我的长生果教学反思
2014/04/28 职场文书
护理专业自荐书
2014/06/04 职场文书
建筑院校毕业生求职信
2014/06/13 职场文书
青年标兵事迹材料
2014/08/16 职场文书
2014公司党员自我评价范文
2014/09/11 职场文书
采购员岗位职责
2015/02/03 职场文书
学生会个人总结范文
2015/02/15 职场文书
2015年公共机构节能宣传周活动总结
2015/03/26 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
小程序教您怎样你零成本推广获取数万用户的方法
2019/07/30 职场文书