一篇文章帶你了解JavaScript時間
一、前言
setTimeout(function, milliseconds) 在等待指定的毫秒數后執行函數。setInterval(function, milliseconds) setTimeout()相同，但會重復執行。
二、時間事件
窗口對象允許在指定的時間間隔執行代碼。時間間隔稱為定時事件。
1. setTimeout() 方法
- window.setTimeout(function, milliseconds);
window.setTimeout() 方法可以不用窗口window前綴編寫。
第一個參數是要執行的函數，第二個參數指示執行前的毫秒數。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;\">
- <p>點擊"試試". 等3秒，這個頁面將提示"Hello".</p>
- <button onclick="setTimeout(myFunction, 3000);">試試</button>
- <script>
- function myFunction() {
- alert('Hello');
- }
- </script>
- </body>
- </html>
如何停止執行?
clearTimeout() 方法停止指定的函數setTimeout()的執行。
語法：
- window.clearTimeout(timeoutVariable)
window.clearTimeout() 方法可以不用窗口window前綴編寫。
clearTimeout() 方法使用setTimeout()返回的變量。
- myVar = setTimeout(function, milliseconds);
- clearTimeout(myVar);
如果該函數尚未被執行，則可以通過調用 clearTimeout() 方法:
例：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;">
- <p>點擊 "試試". 等3秒。這個頁面將出現一個"Hello".</p>
- <p>單擊“停止”以阻止第一個功能執行。</p>
- <p>（您必須在3秒鐘之前單擊“停止”。）</p>
- <button onclick="myVar = setTimeout(myFunction, 3000)">試試</button>
- <button onclick="clearTimeout(myVar)">停止</button>
- <script>
- function myFunction() {
- alert("Hello");
- }
- </script>
- </body>
- </html>
2. setInterval() 方法
setInterval() 方法在給定的時間間隔內重復給定的函數。
- window.setInterval(function, milliseconds);
window.setInterval() 方法可以不用窗口window前綴編寫。
第一個參數是要執行的函數。
第二個參數指示每次執行之間的時間間隔的長度。
例：
執行一個稱為“myTimer”的函數，每隔二秒(像一個數字表)。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;">
- <p>A script on this page starts this clock:</p>
- <p id="demo"></p>
- <script>
- var myVar = setInterval(myTimer, 1000);
- function myTimer() {
- var d = new Date();
- document.getElementById("demo").innerHTML = d.toLocaleTimeString();
- }
- </script>
- </body>
- </html>
(一秒鐘等于1000毫秒)。
如何停止執行?
clearInterval() 方法停止指定的函數setInterval()的執行。
- window.clearInterval(timerVariable)
window.clearInterval() 方法可以不用窗口window前綴編寫。
clearInterval() 方法使用從setInterval()返回的變量 。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>項目</title>
- </head>
- <body style="background-color: aqua;">
- <p>A script on this page starts this clock:</p>
- <p id="demo"></p>
- <button onclick="clearInterval(myVar)">停止</button>
- <script>
- var myVar = setInterval(myTimer, 1000);
- function myTimer() {
- var d = new Date();
- document.getElementById("demo").innerHTML = d.toLocaleTimeString();
- }
- </script>
- </body>
- </html>
代碼解析：
運行效果：
三、總結
本文基于JavaScript基礎，介紹了JavaScript 時間事件 setTimeout()，setInterval() 方法，這兩種方法的語法，實際用法和區別。以及如何去啟動定時器，停止定時器，通過詳細案例分析。運行效果圖的展示。進行了詳細的講解。代碼很簡單，希望能夠幫助你學習。
希望大家可以根據文章的內容，積極嘗試，有時候看到別人實現起來很簡單，但是到自己動手實現的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學習有幫助。
本文轉載自微信公眾號「前端進階學習交流」，可以通過以下二維碼關注。轉載本文請聯系前端進階學習交流公眾號。
