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 | function log(s){ |
05 | $( '#div_debug' ).append(s+ '<br>' ); |
06 | } |
07 |
08 | //下文中测试用的代码可以放在这一行注释的下面,替换掉 //... |
09 | //... |
10 |
11 | </script> |
原生态 javascript 中的 setTimeout 基本用法是像这样子的.
1 | //原生态 javascript 中的 setTimeout 基本用法 |
2 | function funA(){ |
3 | log( 'funA...' ); |
4 | setTimeout( 'funA()' , 1000); |
5 | } |
6 | funA(); |
下面是jQuery中setTimeout的几种使用方法. 在线实例
01 | //jQuery 中的用法 |
02 | function funA(){ |
03 | log( 'funA...' ); |
04 | setTimeout( 'funA()' , 1000); |
05 | } |
06 |
07 | jQuery(document).ready( function ($){ |
08 | //用法1 : 把要调用的函数写在ready外面,使它成为全局函数 |
09 | funA(); |
10 |
11 | //用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数 |
12 | function funB(){ |
13 | log( 'funB...' ); |
14 | setTimeout(funB, 1000); |
15 | } |
16 | funB(); |
17 |
18 | //用法3 : 通过调用匿名函数来执行,适合有带参数的函数 |
19 | function funC(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 | function funC(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种方法.