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 极速 隐藏/显示万行表格列只需 60毫秒
Mar 28 Javascript
搭建pomelo 开发环境
Jun 24 Javascript
jquery实现多条件筛选特效代码分享
Aug 28 Javascript
图片旋转、鼠标滚轮缩放、镜像、切换图片js代码
Dec 13 Javascript
JavaScript实现点击按钮字体放大、缩小
Feb 29 Javascript
js停止冒泡和阻止浏览器默认行为的简单方法
May 15 Javascript
实例解析js中try、catch、finally的执行规则
Feb 24 Javascript
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
AngularJS实现与后台服务器进行交互的示例讲解
Aug 13 Javascript
Vue 使用formData方式向后台发送数据的实现
Apr 14 Javascript
基于JS实现table导出Excel并保留样式
May 19 Javascript
vue3.0实现点击切换验证码(组件)及校验
Nov 18 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 将图片按创建时间进行分类存储的实现代码
2010/01/05 PHP
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
php排序算法(冒泡排序,快速排序)
2012/10/09 PHP
PHP处理会话函数大总结
2015/08/05 PHP
YII Framework框架教程之国际化实现方法
2016/03/14 PHP
Thinkphp5+plupload实现的图片上传功能示例【支持实时预览】
2019/05/08 PHP
Laravel 之url参数,获取路由参数的例子
2019/10/21 PHP
走出JavaScript初学困境—js初学
2008/12/29 Javascript
用Javascript 和 CSS 实现脚注(Footnote)效果
2009/09/09 Javascript
数组方法解决JS字符串连接性能问题有争议
2011/01/12 Javascript
基于jquery &amp; json的省市区联动代码
2012/06/26 Javascript
基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案
2014/09/26 NodeJs
jquery.cookie.js使用指南
2015/01/05 Javascript
SWFObject基本用法实例分析
2015/07/20 Javascript
关于JavaScript的变量的数据类型的判断方法
2015/08/14 Javascript
使用CSS+JavaScript或纯js实现半透明遮罩效果的实例分享
2016/05/09 Javascript
jquery 无限极下拉菜单的简单实例(精简浓缩版)
2016/05/31 Javascript
Vue.js 中的 $watch使用方法
2017/05/25 Javascript
原生js调用json方法总结
2018/02/22 Javascript
angularjs下ng-repeat点击元素改变样式的实现方法
2018/09/12 Javascript
Vue中keep-alive的两种应用方式
2020/07/15 Javascript
浅谈JavaScript窗体Window.ShowModalDialog使用
2020/07/22 Javascript
Vue自动构建发布脚本的方法示例
2020/07/24 Javascript
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
浅谈numpy数组中冒号和负号的含义
2018/04/18 Python
基于python3 的百度图片下载器的实现代码
2019/11/05 Python
解决os.path.isdir() 判断文件夹却返回false的问题
2019/11/29 Python
win10安装tesserocr配置 Python使用tesserocr识别字母数字验证码
2020/01/16 Python
Python使用xpath实现图片爬取
2020/09/16 Python
python mongo 向数据中的数组类型新增数据操作
2020/12/05 Python
伦敦一家非常流行的时尚精品店:Oxygen Boutique
2017/01/15 全球购物
日本航空官方网站:JAL
2019/06/19 全球购物
师范应届生教师求职信
2013/11/05 职场文书
创业计划实施的7大步骤
2014/02/05 职场文书
安全保证书范文
2014/04/29 职场文书
什么是动态刷新率DRR? Windows11动态刷新率功能介绍
2021/11/21 数码科技