JavaScript setInterval()
程式語言中,語法結構的名稱都會盡量做到名副其實,在一定程度上做到見詞達意的效果。
那麼學習setInterval方法也最好也從它的名稱入手。
setInterval由set與interval構成,set具有"設定"意思,interval具有"間隔"的意思。
那麼setInterval為什麼東西設定什麼樣的間隔呢,結論如下:
此方法為指定程式碼的執行設定指定的時間間隔,也就是每隔指定時間迴圈執行指定程式碼。
更多內容可以參閱JavaScript window 物件一章節。
特別說明:凡是屬於window物件的方法都可以直接使用,無需使用window呼叫。
語法結構一:
[JavaScript] 純文字檢視 複製程式碼let intervalID = setInterval(func, interval[, param1, param2, ...])
引數解析:
(1).intervalID:setInterval方法的返回值,作為此次setInterval方法呼叫的唯一標識。
(2).func:必需,將要被迴圈呼叫的回撥函式。
(3).interval:必需,週期的時間跨度,以毫秒計算。
(4).paramN:可選,將要傳遞給func函式的引數。
語法結構二:
[JavaScript] 純文字檢視 複製程式碼let intervalID = setInterval(codeStr, interval)
引數解析:
(1).intervalID:setInterval方法的返回值,作為此次setInterval方法呼叫的唯一標識。
(2).codeStr:必需,JavaScript程式碼字串(不推薦使用此方式,原因與eval方法相同)。
(3).interval:必需,週期的時間跨度,以毫秒計算。
瀏覽器支援:
(1).IE瀏覽器支援此方法。
(2).edge瀏覽器支援此方法。
(3).谷歌瀏覽器支援此方法。
(4).opera瀏覽器支援此方法。
(5).火狐瀏覽器支援此方法。
(6).safria瀏覽器支援此方法。
特別說明:語法結構一中,可以傳遞第三個引數,不過IE9和IE9以下瀏覽器不支援。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload = function () { let count = 0; let bt = document.getElementById("bt"); function done(){ document.getElementById("ant").innerHTML = count + 1; count =count +1; } let intervalID = setInterval(done, 1000); bt.onclick = function () { clearInterval(intervalID); } } </script> </head> <body> <div id="ant">0</div> <input type="button" id="bt" value="停止定時器"/> </body> </html>
上面程式碼實現數字每秒增加1的效果,程式碼分下如下:
(1).let intervalID = setInterval(done, 1000) ,done函式會被每間隔1000毫秒執行一次。
(2).done函式能夠實現將數字寫入div,然後將數字加1。
(3).intervalID是此次setInterval方法呼叫的唯一標識,每一次setInterval方法呼叫返回的標識不同。(4).clearInterval(intervalID),可以停止定時器函式的執行。
關於clearInterval用法可以參閱JavaScript clearInterval()一章節。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> window.onload = function () { let count = 0; let bt = document.getElementById("bt"); function done(){ document.getElementById("ant").innerHTML = count + 1; count =count +1; } let intervalID = setInterval("done()", 1000); bt.onclick = function () { clearInterval(intervalID); } } </script> </head> <body> <div id="ant">0</div> <input type="button" id="bt" value="停止定時器"/> </body> </html>
方法的第一個引數可以是JavaScript程式碼字串,每隔指定時間執行字串中的程式碼。
程式碼是上述程式碼報錯了,截圖如下:
報錯原因是,沒有查詢到done函式,這是因為如果第一個引數是字串,那麼將會在全域性作用查詢done函式。
程式碼修改如下:
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script> let count = 0; function done(){ document.getElementById("ant").innerHTML = count + 1; count =count +1; } window.onload = function () { let bt = document.getElementById("bt"); let intervalID = setInterval("done()", 1000); bt.onclick = function () { clearInterval(intervalID); } } </script> </head> <body> <div id="ant">0</div> <input type="button" id="bt" value="停止定時器"/> </body> </html>
上述程式碼可以正常執行,將函式done放在全域性作用域。
[HTML] 純文字檢視 複製程式碼執行程式碼<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <script type="text/javascript"> window.onload = function () { let count = 0; let max = 20; let bt = document.getElementById("bt"); function show(max) { if (count >= max) { clearInterval(flag); return; } document.getElementById("ant").innerHTML = count + 1; count = count + 1; } let intervalID = setInterval(show, 1000, max); bt.onclick = function () { clearInterval(intervalID); } } </script> </head> <body> <div id="ant">0</div> <input type="button" id="bt" value="停止定時器"/> </body> </html>
上述程式碼為setInterval方法傳遞了第三個引數,這個引數會被傳遞給回撥函式。
相關文章
- JavaScript - 函式 setTimeout 和 setInterval 的比較JavaScript函式
- javascript定時器(setTimeout和setInterval)的使用詳解JavaScript定時器
- 深度解密setTimeout和setInterval——為setInterval正名!解密
- setTimeout && setInterval
- JavaScript深入淺出非同步程式設計一、setTimeout和setIntervalJavaScript非同步程式設計
- 如何停止setInterval()
- 停止setInterval() 執行
- setInterval()與setTimeout()區別
- 使用 React Hooks 宣告 setIntervalReactHook
- setInterval()不準確原因分析
- 間隔呼叫方法(setInterval與setTimeout)
- 定時器(setInterval、setTimeout 和requestAnimationFrame)定時器requestAnimationFrame
- setInterval 回撥函式傳引數函式
- 從setTimeout/setInterval看JS執行緒JS執行緒
- VUE中setTimeout和setInterval自動銷燬Vue
- SetTimeout、SetInterVal、setImmediate和process.nextTick的理解
- JS動畫三劍客——setTimeout、setInterval、requestAnimationFrameJS動畫requestAnimationFrame
- 通過 React Hooks 宣告式地使用 setIntervalReactHook
- setInterval 、 settimeout 、clearInterval 用法(特殊情況下代替schedule)
- 使用setInterval與clearInterval踩的小坑總結
- 關於setInterval和setTImeout中的this指向問題
- 定時器(setTimeout/setInterval)最小延遲的問題定時器
- 用setTimeout和clearTimeout簡單實現setInterval與clearInterval
- setInterval和setTimeout區別(驗證碼倒數計時)
- 完美解決setInterval在瀏覽器切換時加速的問題瀏覽器
- 華為快應用在setInterval中繪製canvas動畫卡頓,怎麼破Canvas動畫
- 定時器setInterval,只執行一次/第一次延遲執行定時器
- 2020.11.20 setInterval函式的注意事項 ES6-8學習(let const 解構賦值)函式賦值
- JavaScript高階:JavaScript物件導向,JavaScript內建物件,JavaScript BOM,JavaScript封裝JavaScript物件封裝
- javaScript系列[06]-javaScript和thisJavaScript
- [Javascript] How javascript read the property?JavaScript
- javaScript系列[05]-javaScript和JSONJavaScriptJSON
- “This” is For JavaScriptJavaScript
- This in JavaScriptJavaScript
- JavaScript -"this"JavaScript
- JavaScriptJavaScript
- javascript ??JavaScript
- 44 道 JavaScript 難題(JavaScript Puzzlers!)JavaScript