一篇文章帶你了解JavaScript時間
回復(fù)“前端”即可獲贈前端相關(guān)學(xué)習(xí)資料
一、前言
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ù)。
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;\"><p>點(diǎn)擊"試試". 等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() 方法:
例：
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</title></head><body style="background-color: aqua;"><p>點(diǎn)擊 "試試". 等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ù)字表）。
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</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()返回的變量 。
<html lang="en"><head><meta charset="UTF-8"><title>項(xiàng)目</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>
代碼解析：
運(yùn)行效果：
三、總結(jié)
本文基于JavaScript基礎(chǔ)，介紹了JavaScript 時間事件 setTimeout(），setInterval() 方法，這兩種方法的語法，實(shí)際用法和區(qū)別。以及如何去啟動定時器，停止定時器，通過詳細(xì)案例分析。運(yùn)行效果圖的展示。進(jìn)行了詳細(xì)的講解。代碼很簡單，希望能夠幫助你學(xué)習(xí)。
希望大家可以根據(jù)文章的內(nèi)容，積極嘗試，有時候看到別人實(shí)現(xiàn)起來很簡單，但是到自己動手實(shí)現(xiàn)的時候，總會有各種各樣的問題，切勿眼高手低，勤動手，才可以理解的更加深刻。
使用JavaScript 語言，方便大家更好理解，希望對大家的學(xué)習(xí)有幫助。
------------------- End -------------------
往期精彩文章推薦：
歡迎大家點(diǎn)贊，留言，轉(zhuǎn)發(fā)，轉(zhuǎn)載，感謝大家的相伴與支持
想加入前端學(xué)習(xí)群請?jiān)诤笈_回復(fù)【入群】
萬水千山總是情，點(diǎn)個【在看】行不行