引用：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种方法.