DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> JavaScript入門知識 >> jQuery入門知識 >> JQuery特效代碼 >> jQuery setTimeout()函數使用方法
jQuery setTimeout()函數使用方法
編輯:JQuery特效代碼     
setTimeout()
從載入後延遲指定的時間去執行一個表達式或者是函數;
僅執行一次 ;和window.clearTimeout一起使用.

我在

. 代碼如下:
$(document).ready(function(){
setTimout(test(),200);
function test()
{
alert(1);
}
});


只會執行一次,有朋友說可以使用

. 代碼如下:
setInterval ("showTime()", 5000);
function showTime()
{
var today = new Date();
alert("The time is: " + today.toString ());
}


但我調用下面方法也可以和setInterval一樣哦

. 代碼如下:
<div id="div_debug"></div>
<script language="JavaScript">
//顯示
function log(s){
$('#div_debug').append(s+'<br>');
}
//以下是 setTimeout 在 jQuery 中的用法
function funA(){
log('funA...');
setTimeout('funA()', 1000);
}
jQuery(document).ready(function($){
//用法1 : 把要調用的函數寫在ready外面,使它成為全局函數
funA();
//用法2 : 直接寫函數名,不能帶括號也不能帶引號,適合沒有參數的函數
function funB(){
log('funB...');
setTimeout(funB, 1000);
}
funB();
//用法3 : 通過調用匿名函數來執行,適合有帶參數的函數
function funC(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(101);
});
</script>


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); //這一句是正常的, 明白兩者之間的區別了吧
});
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved