jquery set timeout 用法
引用:http://www.studyday.net/2011/01/177
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种方法.