JavaScript setTimeout()
setTimeout是JavaScript中定時器方法之一,另一個定時器方法是setInterval。
由於使用頻繁,它的重要性毋庸置疑,網上關於它的文章更是多如牛毛。
其中不乏優秀的文章,大多數文章存在一個問題,那就是重複度太高,只介紹最為基礎的東西,很多重要的特性都沒有涉及,本文將通過程式碼例項詳細介紹一下setTimeout方法的用法。
此方法可以延遲指定時間再去執行規定的程式碼。
語法結構:
[JavaScript] 純文字檢視 複製程式碼setTimeout(code,interval)
引數解析:
(1).code:必需,延遲指定時間後要執行的程式碼。
(2).interval:必需,規定要延遲的時間,單位是毫秒。
在ES5中,還可以傳遞第三個引數,現在不做介紹,文章後面會有專門的例項程式碼演示。
可以使用clearTimeout方法終止setTimeout方法的執行。
更多關於window物件內容參閱JavaScript window 物件一章節。
瀏覽器支援:
(1).IE瀏覽器支援此方法。
(2).edge瀏覽器支援此方法。
(3).谷歌瀏覽器支援此方法。
(4).opera瀏覽器支援此方法。
(5).火狐瀏覽器支援此方法。
(6).safria瀏覽器支援此方法。
特別說明:IE9+與其他標準瀏覽器支援傳遞第三個引數。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=""> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function setStyle() { var odiv = document.getElementById("ant"); odiv.style.color="red"; odiv.style.backgroundColor="#ccc"; odiv.style.textAlign="center"; odiv.style.lineHeight="40px"; } setTimeout(setStyle,2000) </script> </head> <body> <div id="ant">螞蟻部落</div> </body> </html>
上面的程式碼會在2秒之後設定div元素的相關樣式。
setTimeout第一個引數除了是回撥函式(推薦使用)也可以是字串。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=""> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function setStyle() { var odiv = document.getElementById("ant"); odiv.style.color="red"; odiv.style.backgroundColor="#ccc"; odiv.style.textAlign="center"; odiv.style.lineHeight="40px"; } setTimeout("setStyle()",2000) </script> </head> <body> <div id="ant">螞蟻部落</div> </body> </html>
此時它對字串引數的處理方式類似於eval()方法;不推薦使用此方式。
並且setTimeout方法會在全域性作用域查詢通過字串傳遞的函式。
看如下程式碼例項:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=""> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload=function(){ function setStyle() { var odiv = document.getElementById("ant"); odiv.style.color="red"; odiv.style.backgroundColor="#ccc"; odiv.style.textAlign="center"; odiv.style.lineHeight="40px"; } setTimeout("setStyle()",2000) } </script> </head> <body> <div id="ant">螞蟻部落</div> </body> </html>
上面的程式碼會報錯,谷歌控制檯執行截圖如下:
因為這個時候setTimeout會在全域性作用域查詢setStyle函式,然而它是宣告在函式作用域中。
傳遞第三個引數:
setTimeout方法還可以接收第三個引數,此引數會被傳遞給被呼叫的回撥函式。
這是ES5新增的語法結構,低版本的IE瀏覽器並不支援。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=""> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function setStyle() { var odiv = document.getElementById("ant"); odiv.style.color=styleObj.color; odiv.style.backgroundColor=styleObj.bgColor; odiv.style.textAlign=styleObj.textAlign; odiv.style.lineHeight=styleObj.lineHeight; } let styleObj={ color:"red", bgColor:"#ccc", textAlign:"center", lineHeight:"40px" } setTimeout(setStyle,2000,styleObj) </script> </head> <body> <div id="ant">螞蟻部落</div> </body> </html>
第三個引數會被作為setStyle函式的引數傳遞;為了相容所有瀏覽器可以採用如下兩種方式。
程式碼例項一:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=""> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> function setStyle() { var odiv = document.getElementById("ant"); odiv.style.color=styleObj.color; odiv.style.backgroundColor=styleObj.bgColor; odiv.style.textAlign=styleObj.textAlign; odiv.style.lineHeight=styleObj.lineHeight; } let styleObj={ color:"red", bgColor:"#ccc", textAlign:"center", lineHeight:"40px" } setTimeout("setStyle(styleObj)",2000) </script> </head> <body> <div id="ant">螞蟻部落</div> </body> </html>
回撥函式以字串方式使用,可以直接傳遞引數,不過不推薦使用。
程式碼例項二:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset=""> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> let styleObj={ color:"red", bgColor:"#ccc", textAlign:"center", lineHeight:"40px" } setTimeout((function(styleObj){ return function setStyle() { var odiv = document.getElementById("ant"); odiv.style.color=styleObj.color; odiv.style.backgroundColor=styleObj.bgColor; odiv.style.textAlign=styleObj.textAlign; odiv.style.lineHeight=styleObj.lineHeight; } })(styleObj),2000) </script> </head> <body> <div id="ant">螞蟻部落</div> </body> </html>
採用閉包的方式巧妙的實現了引數的傳遞。
說實話,以當前的軟硬體發展速度,基本可以不用考慮低版本IE瀏覽器。
相關文章
- JavaScript setTimeout() 介紹JavaScript
- javascript requestAnimationFrame vs. setTimeoutJavaScriptrequestAnimationFrame
- Javascript執行機制(setTimeout/Promise)JavaScriptPromise
- JavaScript 中 setTimeout 的那些事兒JavaScript
- 從setTimeout談JavaScript執行機制JavaScript
- JavaScript - 函式 setTimeout 和 setInterval 的比較JavaScript函式
- JavaScript 事件迴圈(1) —— 從 setTimeout 說起JavaScript事件
- 你不知道的Javascript:有趣的setTimeoutJavaScript
- JavaScript 開發者應該知道的 setTimeout 祕密JavaScript
- 讓JavaScript中setTimeout支援鏈式操作的方法JavaScript
- setTimeout(fn, 0) // it works - JavaScript 事件迴圈 動畫演示JavaScript事件動畫
- javascript定時器(setTimeout和setInterval)的使用詳解JavaScript定時器
- 對JavaScript呼叫堆疊和setTimeout用法的深入研究JavaScript
- JavaScript深入淺出非同步程式設計一、setTimeout和setIntervalJavaScript非同步程式設計
- Javascript非同步程式設計之setTimeout與setInterval詳解分析(一)JavaScript非同步程式設計
- setInterval()與setTimeout()區別
- 淺析setTimeout與PromisePromise
- 使用setTimeout實現setInterval
- setTimeout 和 setInterval 的區別
- JavaScript同步、非同步、回撥執行順序之經典閉包setTimeout面試題分析JavaScript非同步面試題
- 定時器(setInterval、setTimeout 和requestAnimationFrame)定時器requestAnimationFrame
- # 走位setTimeout,回手掏Event LoopOOP
- 從setTimeout說事件迴圈模型事件模型
- 如何阻止setTimeout()方法的執行
- JS動畫三劍客——setTimeout、setInterval、requestAnimationFrameJS動畫requestAnimationFrame
- 從setTimeout理解JS執行機制JS
- 深度解密setTimeout和setInterval——為setInterval正名!解密
- 從setTimeout/setInterval看JS執行緒JS執行緒
- 【 js 基礎 】 setTimeout(fn, 0) 的作用JS
- setTimeout倒數計時效果程式碼
- JS中setInterval和setTimeout使用介紹JS
- Promise為什麼比setTimeout先執行?Promise
- [譯]JS閉包:For迴圈中的setTimeoutJS
- VUE中setTimeout和setInterval自動銷燬Vue
- 面試官:為什麼 Promise 比setTimeout() 快?面試Promise
- setTimeout()和setInterval() 何時被呼叫執行
- async await、Promise、setTimeout執行順序AIPromise
- promise,then,setTimeout -- 細緻探討執行流程Promise