一篇文章帶你了解JavaScript時間

作者：前端進(jìn)階者 2021-05-18 08:30:42

本文基于JavaScript基礎(chǔ)，介紹了JavaScript 時間事件 setTimeout()，setInterval() 方法，這兩種方法的語法，實際用法和區(qū)別。以及如何去啟動定時器，停止定時器，通過詳細(xì)案例分析。運行效果圖的展示。進(jìn)行了詳細(xì)的講解。代碼很簡單，希望能夠幫助你學(xué)習(xí)。

[[400056]]

一、前言

setTimeout(function, milliseconds) 在等待指定的毫秒數(shù)后執(zhí)行函數(shù)。setInterval(function, milliseconds) setTimeout()相同，但會重復(fù)執(zhí)行。

二、時間事件

窗口對象允許在指定的時間間隔執(zhí)行代碼。時間間隔稱為定時事件。

1. setTimeout() 方法

window.setTimeout(function, milliseconds);

window.setTimeout() 方法可以不用窗口window前綴編寫。

第一個參數(shù)是要執(zhí)行的函數(shù)，第二個參數(shù)指示執(zhí)行前的毫秒數(shù)。

<!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>

如何停止執(zhí)行?

clearTimeout() 方法停止指定的函數(shù)setTimeout()的執(zhí)行。

語法：

window.clearTimeout(timeoutVariable)

window.clearTimeout() 方法可以不用窗口window前綴編寫。

clearTimeout() 方法使用setTimeout()返回的變量。

myVar = setTimeout(function, milliseconds); 
clearTimeout(myVar);

如果該函數(shù)尚未被執(zhí)行，則可以通過調(diào)用 clearTimeout() 方法:

例：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="UTF-8"> 
<title>項目</title> 
</head> 
<body style="background-color: aqua;"> 
 
<p>點擊 "試試". 等3秒。這個頁面將出現(xiàn)一個"Hello".</p> 
<p>單擊“停止”以阻止第一個功能執(zhí)行。</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() 方法在給定的時間間隔內(nèi)重復(fù)給定的函數(shù)。

window.setInterval(function, milliseconds);

window.setInterval() 方法可以不用窗口window前綴編寫。

第一個參數(shù)是要執(zhí)行的函數(shù)。

第二個參數(shù)指示每次執(zhí)行之間的時間間隔的長度。

例：

執(zhí)行一個稱為“myTimer”的函數(shù)，每隔二秒(像一個數(shù)字表)。

<!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毫秒)。

如何停止執(zhí)行?

clearInterval() 方法停止指定的函數(shù)setInterval()的執(zhí)行。

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>

代碼解析：

運行效果：

三、總結(jié)

希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時候看到別人實現(xiàn)起來很簡單，但是到自己動手實現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。

使用JavaScript 語言，方便大家更好理解，希望對大家的學(xué)習(xí)有幫助。

本文轉(zhuǎn)載自微信公眾號「前端進(jìn)階學(xué)習(xí)交流」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端進(jìn)階學(xué)習(xí)交流公眾號。

責(zé)任編輯：姜華來源：前端進(jìn)階學(xué)習(xí)交流

JavaScript 前端 JavaScript時間