setInterval與setTimeout的區別

時間 2019-11-29

標籤 setinterval settimeout 區別简体版

原文原文鏈接

一.setInterval與setTimeout的區別

setIntervalhtml

setInterval()方法可按照指定的週期來調用函數或者計算表達式（以毫秒爲單位）函數

語法：學習

setInterval(函數表達式，毫秒數)；spa

setInterval()會不停的調用函數，直到clearInterval()被調用或者窗口被關閉，由 setInterval()返回的ID值可用做clearInterval()方法的參數。code

setTimeouthtm

setTimeout()方法用於在指定毫秒數後再調用函數或者計算表達式（以毫秒爲單位）blog

語法：ip

setTimeout(函數表達式，毫秒數)；utf-8

setTimeout()只執行函數一次，若是須要屢次調用能夠使用setInterval(),或者在函數體內再次調用setTimeout()it

區別

　　經過以上分析能夠看出，setTimeout與setInterval的主要區別是:

　　setTimeout()方法只運行一次，也就是說當達到設定的時間後就出發運行指定的代碼，運行完後就結束了，若是還想再次執行一樣的函數，能夠在函數體內再次調用setTimeout()，能夠達到循環調用的效果。

　　setInterval()是循環執行的，即每達到指定的時間間隔就執行相應的函數或者表達式，是真正的定時器。

二.setTimeout()的用法

　　先寫個最簡單的demo，以下：

 1 <!DOCTYPE html>
 2  <html lang="en">
 3      <head>
 4            <meta charset="utf-8">
 5            <script>
 6                   setTimeout("alert('hello')",2000);
 7            </script>
 8      </head>
 9     <body>
10     </body>
11 </html>

頁面會在停留2秒以後彈出對話框,注意setTimeout不會自動重複執行！

固然，setTimeout也能夠執行function，還能夠不斷重複執行！

你能夠看到h1中的文本數字在一秒一秒地遞增！

更加靈活的是，你還能夠指定重複執行的次數，以下：

if判斷中的數字，是用來限制重複執行次數的條件。

三.clearTimeout()

要使用clearTimeout()，須要咱們設定setTimeout()時，給予這setTimeout()一個名稱, 這名稱就是timeoutID ，咱們叫停時，就是用這 timeoutID 來叫停

 1  <!DOCTYPE html>
 2   <html lang="en">
 3       <head>
 4             <meta charset="utf-8">
 5             <script>
 6                   var timeId= setTimeout("alert('hello')",2000);
 7                    clearTimeout(timeId);
 8             </script>
 9       </head>
10      <body>
11      </body>
12  </html>

原計劃1秒後彈出的警示框，被天然叫停了。

本人正在學習和摸索中，若有錯誤，歡迎指正！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。