setInterval 回撥函式傳引數

關於setInterval方法的詳細用法可以參閱JavaScript setInterval()一章節。

其實在上述文章也涉及到為回撥函式傳引數，不過很多朋友關注點在傳參本身。

下面就通過程式碼例項介紹一下如何為回撥函式傳引數。

一.錯誤傳參方式舉例：

下面看一個比較常見的錯誤傳參方式，程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(){
  console.log("http://www.softwhy.com");
}
setInterval(func,5000);

程式碼會在5秒後列印出螞蟻部落網址"http://www.softwhy.com"。

下面我們想讓func函式更加靈活一些，將列印內容通過引數的方式傳遞。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(url){
  console.log(url);
}
setInterval(func("http://www.softwhy.com"),5000);

上述程式碼的本意是為回撥函式傳遞引數"http://www.softwhy.com"，然後在5秒後列印出引數。

但是執行後發現，引數會被立即列印出來，這是因為func並不是setInterval的回撥函式，因為func會立即執行（也就是網址會被立即列印的原因），實際傳遞給setInterval的是func的返回值（當然它的返回值為undefined）。

二.傳參正確方式：

setInterval還可以傳遞第三個引數，此引數被作為回撥函式的引數。

程式碼例項如下：

[JavaScript] 純文字檢視 複製程式碼執行程式碼
function func(url){
  console.log(url);
}
setInterval(func,5000,"http://www.softwhy.com");

上述程式碼會在5秒後列印出本站網址。

由於IE9和IE9以下瀏覽器不支援第三個引數，所以較早的教程很少教程。

上面的方式當前還不夠穩妥，要相容當前所有主流瀏覽器，可以採用如下方式。

[JavaScript] 純文字檢視 複製程式碼執行程式碼
setInterval((function(){
  return function(){
    console.log(url);
  }
})("http://www.softwhy.com"),5000);

上述程式碼可以在5秒後列印出本站網址。

程式碼分析如下：

（1）.setInterval第一個引數是一個立即執行匿名函式，為其傳遞的引數是要列印的網址。

（2）.此匿名函式執行後返回一個函式，返回的函式才是真正傳遞給setInterval的回撥函式。

（3）.根據作用域與作用域鏈的原理，返回的函式可以使用通過外層函式傳遞進來的引數url。

（4）.於是可以正常列印出傳遞的網址。

總結：如果不太考慮瀏覽器相容問題，可以使用為setInterval傳遞第三個引數的方式，如果要穩妥，那麼推薦使用最後一種方式，特別說明，對於settimeout方法也是如此。