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 相关文章推荐
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 Javascript
JS代码优化技巧之通俗版(减少js体积)
Dec 23 Javascript
解析John Resig Simple JavaScript Inheritance代码
Dec 03 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
Jan 23 Javascript
Html5+jQuery+CSS制作相册小记录
Dec 30 Javascript
Angular实现的进度条功能示例
Feb 18 Javascript
vue获取当前点击的元素并传值的实例
Mar 09 Javascript
vue2.0 中使用transition实现动画效果使用心得
Aug 13 Javascript
vue-cli2打包前和打包后的css前缀不一致的问题解决
Aug 24 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
Aug 02 Javascript
浅谈vue中$event理解和框架中在包含默认值外传参
Aug 07 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
PHP5常用函数列表(分享)
2013/06/07 PHP
php中通过数组进行高效随机抽取指定条记录的算法
2013/09/09 PHP
php导入导出excel实例
2013/10/25 PHP
腾讯QQ微博API接口获取微博内容
2013/10/30 PHP
PHP魔术方法__GET、__SET使用实例
2014/11/25 PHP
typecho插件编写教程(二):写一个新插件
2015/05/28 PHP
PHP递归创建多级目录
2015/11/05 PHP
JavaScript单元测试ABC
2012/04/12 Javascript
自己写的Javascript计算时间差函数
2013/10/28 Javascript
完美兼容各大浏览器的jQuery仿新浪图文淡入淡出间歇滚动特效
2014/11/12 Javascript
js中的内部属性与delete操作符介绍
2015/08/10 Javascript
JS文字球状放大效果代码分享
2015/08/19 Javascript
JS获取屏幕高度的简单实现代码
2016/05/24 Javascript
关于JS变量和作用域详解
2016/07/28 Javascript
jQuery判断是否存在滚动条的简单方法
2016/09/17 Javascript
JavaScript使用Range调色及透明度实例
2016/09/25 Javascript
使用纯JS代码判断字符串中有多少汉字的实现方法(超简单实用)
2016/11/12 Javascript
初探nodeJS
2017/01/24 NodeJs
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
使用ES6语法重构React代码详解
2017/05/09 Javascript
基于vue和react的spa进行按需加载的实现方法
2018/09/29 Javascript
JavaScript indexOf()原理及使用方法详解
2020/07/09 Javascript
Webpack3+React16代码分割的实现
2021/03/03 Javascript
Python操作word常见方法示例【win32com与docx模块】
2018/07/17 Python
python 多个参数不为空校验方法
2019/02/14 Python
python 队列基本定义与使用方法【初始化、赋值、判断等】
2019/10/24 Python
pytorch torchvision.ImageFolder的用法介绍
2020/02/20 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
俄罗斯建筑和装饰材料在线商店:Stroilandia
2020/07/25 全球购物
小学兴趣小组活动总结
2014/07/07 职场文书
项目建议书
2015/02/04 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
3招让你摆脱即兴讲话冷场尴尬
2019/08/08 职场文书
springboot+WebMagic+MyBatis爬虫框架的使用
2021/08/07 Java/Android
一文搞懂Python Sklearn库使用
2021/08/23 Python
python 闭包函数详细介绍
2022/04/19 Python