您的位置：首页 > Web前端 > JQuery

jQuery中setTimeout的几种使用方法

2013-05-22 11:43 351 查看
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适用面更广呢?通过下面这个例子可以很直观的明白二者的区别:

view
source

print?

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

This entry was posted in JavaScritp, html, jquery and
tagged html, javascript, jquery.
Bookmark thepermalink.
Trackbacks are closed, but you can post
a comment.
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航