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 相关文章推荐
URI、URL和URN之间的区别与联系
Dec 20 Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
javascript function、指针及内置对象
Feb 19 Javascript
JavaScript效率调优经验
Jun 04 Javascript
Javascript绝句欣赏 一些经典的js代码
Feb 22 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
JavaScript针对网页节点的增删改查用法实例
Feb 02 Javascript
对node.js中render和send的用法详解
May 14 Javascript
微信小程序之判断页面滚动方向的示例代码
Aug 30 Javascript
图文讲解用vue-cli脚手架创建vue项目步骤
Feb 12 Javascript
通过JS深度判断两个对象字段相同
Jun 14 Javascript
微信小程序按顺序同步执行的两种方式
Dec 20 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
php自动跳转中英文页面
2008/07/29 PHP
PHP 获取文件路径(灵活应用__FILE__)
2013/02/15 PHP
深入apache host的配置详解
2013/06/09 PHP
完美解决phpexcel导出到xls文件出现乱码的问题
2016/10/29 PHP
PHP数据库操作二:memcache用法分析
2017/08/16 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
用客户端js实现带省略号的分页
2013/04/27 Javascript
jquery序列化表单以及回调函数的使用示例
2014/07/02 Javascript
ajax读取数据后使用jqchart显示图表的方法
2015/06/10 Javascript
js实现的二级横向菜单条实例
2015/08/22 Javascript
Zepto实现密码的隐藏/显示
2017/04/07 Javascript
javascript如何用递归写一个简单的树形结构示例
2017/09/06 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
前端js中的事件循环eventloop机制详解
2019/05/15 Javascript
[00:33]2016完美“圣”典风云人物:BurNIng宣传片
2016/12/10 DOTA
Python读取图片为16进制表示简单代码
2018/01/19 Python
Django基于ORM操作数据库的方法详解
2018/03/27 Python
基于Python中numpy数组的合并实例讲解
2018/04/04 Python
python 从csv读数据到mysql的实例
2018/06/21 Python
python安装pil库方法及代码
2019/06/25 Python
python实现同一局域网下传输图片
2020/03/20 Python
公认8个效率最高的爬虫框架
2020/07/28 Python
斯洛伐克香水和化妆品购物网站:Parfemy-Elnino.sk
2020/01/28 全球购物
精选鞋类、服装和配饰的全球领先目的地:Bodega
2021/02/27 全球购物
Yahoo-PHP面试题1
2016/07/20 面试题
运动会解说词100字
2014/01/31 职场文书
小学生作文评语
2014/04/18 职场文书
移交协议书
2014/08/19 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
2014年学校后勤工作总结
2014/12/06 职场文书
房租涨价通知
2015/04/23 职场文书
第二次离婚起诉书
2015/05/18 职场文书
国王的演讲观后感
2015/06/03 职场文书
Mybatis-plus在项目中的简单应用
2021/07/01 Java/Android
Elasticsearch 索引操作和增删改查
2022/04/19 Python
MySQL 字符集 character
2022/05/04 MySQL