jQuery中setTimeout的几种使用方法

来源：互联网发布：富爸爸现金流游戏 mac 编辑：程序博客网时间：2024/06/04 23:39

jQuery 中 setTimeout/setInterval 不能像在原生态 javascript 中那样使用, 否则会报错.
我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数:

01<div id="div_debug"></div>
02<script src="http://www.studyday.net/demo/jquery.js"></script>
03<script language="JavaScript">
04function log(s){
05    $('#div_debug').append(s+'<br>');
06}
07 
08//下文中测试用的代码可以放在这一行注释的下面,替换掉 //...
09//...
10 
11</script>

原生态 javascript 中的 setTimeout 基本用法是像这样子的.

1//原生态 javascript 中的 setTimeout 基本用法
2function funA(){
3    log('funA...');
4    setTimeout('funA()', 1000);
5}
6funA();

下面是jQuery中setTimeout的几种使用方法. 在线实例

01//jQuery 中的用法
02function funA(){
03    log('funA...');
04    setTimeout('funA()', 1000);
05}
06 
07jQuery(document).ready(function($){
08    //用法1 : 把要调用的函数写在ready外面,使它成为全局函数
09    funA();
10 
11    //用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数
12    functionfunB(){
13        log('funB...');
14        setTimeout(funB, 1000);
15    }
16    funB();
17 
18    //用法3 : 通过调用匿名函数来执行,适合有带参数的函数
19    functionfunC(v){
20        log('funC...'+v);
21        setTimeout(function(){funC(v+1)}, 1000);
22    }
23    funC(1);
24 
25    //用法4 : 通过在jQuery命名空间上增加函数,适用面更广
26    $.extend({
27        funD:function(v){
28            log('funD...'+v);
29            setTimeout("$.funD("+(v+1)+")",1000);
30        }
31    });
32    $.funD(100);
33});

用法2和用法3的区别很明显, 但用法3和用法4的区别在哪里呢?为什么说用法4比用法3适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

01jQuery(document).ready(function($){
02    //用法3 : 通过调用匿名函数来执行,适合有带参数的函数
03    functionfunC(v){
04        log('funC...'+v);
05        setTimeout(function(){funC(v+1)}, 1000);
06    }
07 
08    //用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便
09    $.extend({
10        funD:function(v){
11            log('funD...'+v);
12            setTimeout("$.funD("+(v+1)+")",1000);
13        }
14    });
15});
16 
17jQuery(document).ready(function($){
18    //funC(1);   //去掉注释后执行这一句时会报错
19    $.funD(100);//这一句是正常的, 明白两者之间的区别了吧
20});

另外 setInterval 也同样适合上面所说的4种方法.