jQuery中setTimeout的几种使用方法小结

jQuery 中 setTimeout/setInterval 不能像在原生态 javascript 中那样使用, 否则会报错.

我们通过例子来说明一下jQuery中setTimeout的几种使用方法, 首先准备好测试用的DIV和公共函数:

复制代码代码如下:

<div id="div_debug"></div>
 <script src="http://www.studyday.net/demo/jquery.js"></script> 
 <script language="JavaScript"> 
 functionlog(s){ 
     $('#div_debug').append(s+'<br>'); 
 } 

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

 </script> 

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

复制代码代码如下:

 //原生态 javascript 中的 setTimeout 基本用法 
 functionfunA(){ 
     log('funA...'); 
     setTimeout('funA()', 1000); 
 } 
 funA(); 

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

复制代码代码如下:

 //jQuery 中的用法 
 functionfunA(){ 
     log('funA...'); 
     setTimeout('funA()', 1000); 
 } 

 jQuery(document).ready(function($){ 
     //用法1 : 把要调用的函数写在ready外面,使它成为全局函数 
     funA(); 

     //用法2 : 直接写函数名,不能带括号也不能带引号,适合没有参数的函数 
     functionfunB(){ 
         log('funB...'); 
         setTimeout(funB, 1000); 
     } 
     funB(); 

     //用法3 : 通过调用匿名函数来执行,适合有带参数的函数 
     functionfunC(v){ 
         log('funC...'+v); 
         setTimeout(function(){funC(v+1)}, 1000); 
     } 
     funC(1); 

     //用法4 : 通过在jQuery命名空间上增加函数,适用面更广 
     $.extend({ 
         funD:function(v){ 
             log('funD...'+v); 
             setTimeout("$.funD("+(v+1)+")",1000); 
         } 
     }); 
     $.funD(100); 
 }); 

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

复制代码代码如下:

 jQuery(document).ready(function($){ 
     //用法3 : 通过调用匿名函数来执行,适合有带参数的函数 
     functionfunC(v){ 
         log('funC...'+v); 
         setTimeout(function(){funC(v+1)}, 1000); 
     } 

     //用法4 : 通过在jQuery命名空间上增加函数,调用起来更方便 
     $.extend({ 
         funD:function(v){ 
             log('funD...'+v); 
             setTimeout("$.funD("+(v+1)+")",1000); 
         } 
     }); 
 }); 

 jQuery(document).ready(function($){ 
     //funC(1);   //去掉注释后执行这一句时会报错 
     $.funD(100); //这一句是正常的, 明白两者之间的区别了吧 
 });