jQuery中setTimeout的几种使用方法_jq settimeout用法-优快云博客

本文介绍了在jQuery中使用setTimeout的四种方法，并对比了每种方法的特点及适用场景。通过实例详细展示了如何在jQuery环境中正确地实现延时执行功能。

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">
 
    04function log(s){
 
    05    $('#div_debug').append(s+'<br>');
 
    06}
 
    07 
 
    08//下文中测试用的代码可以放在这一行注释的下面,替换掉 //...
 
    09//...
 
    10 
 
    11</script>

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

 
    1//原生态 javascript 中的 setTimeout 基本用法
 
    2function funA(){
 
    3    log('funA...');
 
    4    setTimeout('funA()', 1000);
 
    5}
 
    6funA();

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

 
    01//jQuery 中的用法
 
    02function funA(){
 
    03    log('funA...');
 
    04    setTimeout('funA()', 1000);
 
    05}
 
    06 
 
    07jQuery(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适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

 
    01jQuery(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 
 
    17jQuery(document).ready(function($){
 
    18    //funC(1);   //去掉注释后执行这一句时会报错
 
    19    $.funD(100); //这一句是正常的, 明白两者之间的区别了吧
 
    20});