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方法也是如此。
相關文章
- 回撥函式函式
- 回撥函式(CallBack)函式
- JavaScript回撥函式JavaScript函式
- JavaScript 回撥函式JavaScript函式
- JS—回撥函式JS函式
- [JS]回撥函式和回撥地獄JS函式
- 函式指標&回撥函式Callback函式指標
- 回撥函式 與 函式閉包函式
- 函式回撥(C++)函式C++
- 回撥函式的作用函式
- Python/OpenCV:回撥函式PythonOpenCV函式
- TLS回撥函式(Note)TLS函式
- java 回撥函式示例Java函式
- axios自帶的上傳進度回撥函式iOS函式
- JS之回撥函式(callback)JS函式
- C++回撥函式 用法C++函式
- 回撥函式的理解(一)函式
- java回撥函式機制Java函式
- java回撥函式-非同步回撥-簡明講解Java函式非同步
- 【知識點】inline函式、回撥函式、普通函式inline函式
- 函式中引數傳值函式
- JavaScript函式傳遞引數JavaScript函式
- 函式的引數傳遞函式
- C++中的回撥函式C++函式
- 深入理解 JavaScript 回撥函式JavaScript函式
- js 徹底理解回撥函式JS函式
- 函式指標的重要用途——回撥函式函式指標
- 函式引數傳遞及返回函式
- 函式作為引數傳遞函式
- 函數語言程式設計 - 玩轉高階回撥函式函數程式設計函式
- Python技法3:匿名函式、回撥函式和高階函式Python函式
- C語言函式指標與回撥用函式C語言函式指標
- JavaScript:鉤子函式與回撥函式的區別JavaScript函式
- Fastadmin fast.api.open回撥函式ASTAPI函式
- 回撥函式的作用與意義函式
- C 語言回撥函式詳解函式
- ajax 下載Excel 新增回撥函式Excel函式
- JavaScript回撥函式的高手指南JavaScript函式