首頁 > web前端 > js教程 > JavaScript中setTimeout和setInterval函數的傳參及呼叫_基礎知識

JavaScript中setTimeout和setInterval函數的傳參及呼叫_基礎知識

WBOY
發布: 2016-05-16 15:11:06
原創
1302 人瀏覽過

如何傳遞參數給 setTimeout 、 setInterval 參數
看如下程式碼:

var str = 'aaa'; 
var num = 2; 
function auto(num){ 
  alert(num); 
} 
setTimeout('auto(num)',4000); 

登入後複製

這樣寫是可以正常運作的,但是如其說這是參數傳遞,不如說是直接使用的全域變數。所以,這種寫法是沒有必要的,一般情況下更多的是用到傳遞局部變數作為參數。

把程式碼修改一下:

//var str = 'aaa'; 
var num = 2; 
function test(){ 
  var str = 'bbb'; 
  setTimeout('auto(str)',4000); 
} 
function auto(a){ 
  alert(a); 
} 
test(); 
登入後複製

這種寫法會報錯,如果把取消對 str 的全域宣告的註釋,就會輸出 aaa,即函數依然是呼叫全域變數。
看下面的程式碼:

//var str = 'aaa'; 
var num = 2; 
function test(){ 
  var str = 'bbb'; 
  setTimeout('auto("str")',4000); 
} 
function auto(a){ 
  alert(a); 
} 
test(); 

登入後複製

注意上面的 str ,這樣寫會輸出 “str”,也就是說定時器呼叫函數後,是把 str 直接當作了參數。這樣傳遞的參數永遠是字串。這不是我們想要的結果。

要想傳遞除字串意外的參數,可以使用閉包,看下面程式碼:

//var str = 'aaa'; 
var num = 2; 
function test(){ 
  var str = 'bbb'; 
  setTimeout(auto(str),4000); 
} 
function auto(str){ 
  return function(){ 
    alert(str); 
  } 
} 
test(); 

登入後複製

輸出結果為 ‘bbb',如果給auto(str)加上引號同樣會報錯。
當然,這樣寫也是不錯的:

var num = 2; 
function test(){ 
  var str = 'bbb'; 
  //setTimeout(auto(str),4000); 
  setTimeout(function(){alert(str)},4000); 
} 
function auto(str){ 
  return function(){ 
    alert(str); 
  } 
} 
test(); 

登入後複製

最後要注意的是,當字不使用閉包傳遞參數時,定時器呼叫的函數是要加引號的,不加引號,會報錯。以上情形同樣適合 setInterval();


setTimeout 、 setInterval 中的函式呼叫
有以下程式碼:

var num = 2; 
function auto(){ 
  alert(num); 
} 
setTimeout(auto(),4000); 
登入後複製

在這段程式裡,測驗的時候立刻就可以看到彈出的警告框。也就是說按照以上方法引用函數,定時器是不起作用的。

同樣,對於setInterval上面的寫法也無法正常運作,程式只能彈出一次警告框,然後報錯。
把定時器改為

setInterval('auto()',4000); 
setTimeout('auto()',4000); 
登入後複製

程式可以正常運作。


當不使用auto()呼叫函數,只使用 auto會是什麼樣子呢?

var str = 'aaa'; 
var num = 2; 
function auto(){ 
  alert(num); 
} 
//setInterval(auto,4000); 
setTimeout(auto,4000); 

登入後複製

這樣寫程式都可以正常運作;

如果給auto加引號

//setInterval('auto',4000); 
setTimeout('auto',4000); 

登入後複製

都無法正常運作。

來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板