jQuery中setTimeout的几种使用方法

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">

04	functionlog(s){

05	$('#div_debug').append(s+'<br>');

06

}

07

08	//下文中测试用的代码可以放在这一行注释的下面,替换掉 //...

09

//...

10

11

</script>

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

1	//原生态 javascript 中的 setTimeout 基本用法

2	functionfunA(){

3	log('funA...');

4	setTimeout('funA()', 1000);

5

}

6

funA();

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

01	//jQuery 中的用法

02	functionfunA(){

03	log('funA...');

04	setTimeout('funA()', 1000);

05

}

06

07	jQuery(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适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

01	jQuery(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

17	jQuery(document).ready(function($){

18	//funC(1);   //去掉注释后执行这一句时会报错

19	$.funD(100); //这一句是正常的, 明白两者之间的区别了吧

20

});

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