溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“JavaScript定時器原理是什么”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
語法：
window.setTimeout(調用函數, [延遲的毫秒數]);
setTimeout()方法用于設置一個定時器，該定時器在定時器到期后執行調用函數。
例如：寫一個頁面，讓其五秒鐘后彈出‘你好'。
代碼如下：
window.setTimeout(function(){
alert('你好');
},5000);運行結果為：
需要注意的是：
window 可以省略。
這個調用函數可以直接寫函數，或者寫函數名或者采取字符串‘函數名()'三種形式。
延遲的毫秒數省略默認是 0，如果寫，必須是毫秒。setTimeout() 這個調用函數我們也稱為回調函數callback，普通函數是按照代碼順序直接調用。而這個函數，需要等待時間，時間到了才去調用這個函數，因此稱為回調函數。
當我們創建了一個定時器的話，如果我們想要將其取消，應該怎樣操作呢？就用到了清除定時器的函數，如下：
window.clearTimeout(timeoutID)
clearTimeout()方法取消了先前通過調用 setTimeout()建立的定時器。
這里面window 可以省略，并且里面的參數就是定時器的標識符 。
舉個例子：
就上述案列，如果我們想要在指定事件前停止它，可以先添加一個點擊按鈕，給這個按鈕添加清除定時器的事件，操作為：
var hello = window.setTimeout(function(){
alert('你好');
},5000);
var btn = document.querySelector('button');
btn.addEventListener('click',function(){
window.clearTimeout(hello);
})運行效果為：
可以看到，當我們沒有點擊停止按鈕的時候，五秒鐘后彈出‘你好'，刷新頁面后，當我們點擊按鈕后，不論過多久，都不會有彈窗，清除定時器成功。
我們再來看看另一種定時器。
window.setInterval(回調函數, [間隔的毫秒數]);
setInterval()方法重復調用一個函數，每隔這個時間，就去調用一次回調函數。
window 可以省略。
這個調用函數可以直接寫函數，或者寫函數名或者采取字符串 ‘函數名()' 三種形式。
間隔的毫秒數省略默認是 0，如果寫，必須是毫秒，表示每隔多少毫秒就自動調用這個函數。
我們經常給定時器賦值一個標識符。
第一次執行也是間隔毫秒數之后執行，之后每隔毫秒數就執行一次。
舉個例子：
我們來寫一個定時器，讓其每隔一秒就打印一個‘你好'，代碼為：
setInterval(function(){
console.log('你好')
},1000);運行效果為：
同樣的，我們也可以清除setInterval() 定時器的效果，語法為：
window.clearInterval(intervalID);
clearInterval()方法取消了先前通過調用 setInterval()建立的定時器。
注意：
window 可以省略。
里面的參數就是定時器的標識符 。
比如我們現在有兩個按鈕，點擊一個可以開啟定時器，點擊另一個可以清除該定時器，操作方法為：
<body>
<button class='begin'>開始</button>
<button class='stop'>停止</button>
<script>
var btn = document.querySelectorAll('button');
var timer = null;
btn[0].addEventListener('click',function(){
timer = setInterval(function(){
console.log('你好');
},1000)
})
btn[1].addEventListener('click',function(){
clearInterval(timer)
})
</script>
</body>運行效果為：
我們現在就可以做一個電子時鐘，顯示當前的年月日時分秒，并讓他們自動變化，代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
margin: 100px auto;
font-size: 25px;
}
</style>
</head>
<body>
<div></div>
<script>
var div = document.querySelector('div');
function showTime(){
var date = new Date();
var y = date.getFullYear();
var m = date.getMonth()+1;
m = m>=10?m:'0'+m;
var d = date.getDate();
d = d>=10?d:'0'+d;
var h = date.getHours();
h = h>=10?h:'0'+h;
var dm = date.getMinutes();
dm = dm>=10?dm:'0'+dm;
var ds = date.getSeconds();
ds = ds>=10?ds:'0'+ds;
var str = y+'年'+m+'月'+d+'日 '+h+'時'+dm +'分'+ds+'秒';
div.innerHTML = str;
setTimeout(showTime,1000);
}
window.onload = showTime();
</script>
</body>
</html>運行效果為：
“JavaScript定時器原理是什么”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
