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 相关文章推荐
自适应图片大小的弹出窗口
Jul 27 Javascript
Jquery拖拽并简单保存的实现代码
Nov 28 Javascript
从JQuery源码分析JavaScript函数的apply方法与call方法
Sep 25 Javascript
javascript原型链继承用法实例分析
Jan 28 Javascript
js实现图片和链接文字同步切换特效的方法
Feb 20 Javascript
javascript委托(Delegate)blur和focus用法实例分析
May 26 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
JavaScript基础知识之方法汇总结
Jan 24 Javascript
JavaScript SHA-256加密算法详细代码
Oct 06 Javascript
electron实现qq快捷登录的方法示例
Oct 22 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
Apr 15 Javascript
Vue用mixin合并重复代码的实现
Nov 27 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
PHP Global定义全局变量使用说明
2013/08/15 PHP
php使用curl模拟登录后采集页面的例子
2013/11/04 PHP
js弹出框轻量级插件jquery.boxy使用介绍
2013/01/15 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
鼠标经过显示二级菜单js特效
2013/08/13 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
2013/11/05 Javascript
javascript显示中文日期的方法
2015/06/18 Javascript
javascript实现相同事件名称,不同命名空间的调用方法
2015/06/26 Javascript
jQuery实现的网页竖向菜单效果代码
2015/08/26 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
js实现上传图片预览方法
2016/10/25 Javascript
jquery submit()不能提交表单的解决方法
2017/04/24 jQuery
Babel 入门教程学习笔记
2018/06/13 Javascript
深入浅析Vue全局组件与局部组件的区别
2018/06/15 Javascript
webpack结合express实现自动刷新的方法
2019/05/07 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
2020/02/06 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
2020/04/24 Javascript
Mac OS X10.9安装的Python2.7升级Python3.3步骤详解
2013/12/04 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
Python 将pdf转成图片的方法
2018/04/23 Python
使用python对excle和json互相转换的示例
2018/10/23 Python
使用Tkinter制作信息提示框
2020/02/18 Python
python小技巧——将变量保存在本地及读取
2020/11/13 Python
python 解决函数返回return的问题
2020/12/05 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
临床医学大学生求职信
2013/09/28 职场文书
校园餐饮创业计划书
2014/01/10 职场文书
预备党员政审材料
2014/02/04 职场文书
项目经理聘任书
2014/03/29 职场文书
客户答谢会活动方案
2014/08/31 职场文书
小学生自我评价100字(15篇)
2014/09/18 职场文书
教师党员学习十八届四中全会思想汇报
2014/11/03 职场文书
小学班级口号大全
2015/12/25 职场文书
国庆节到了,利用JS实现一个生成国庆风头像的小工具 详解实现过程
2021/10/05 Javascript
redis缓存存储Session原理机制
2021/11/20 Redis
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers