zl程序教程

您现在的位置是:首页 >  前端

当前栏目

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

jQuery方法 使用 几种 小结 setTimeout
2023-06-13 09:14:49 时间

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

复制代码代码如下:


<divid="div_debug"></div>
 <scriptsrc="http://www.studyday.net/demo/jquery.js"></script>
 <scriptlanguage="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);//这一句是正常的,明白两者之间的区别了吧
 });