溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“JavaScript的setTimeout和setInterval怎么用”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“JavaScript的setTimeout和setInterval怎么用”吧！
首先，setTimeout()和setInterval()函數是JavaScript中兩個很重要的關于"時間的函數"，因此，我們在學習JavaScript的過程中，一定要對這兩個函數有一個深入的學習，它們兩個函數也是經常被使用！
其中，如果分別用一句話來概括這兩個函數，那么應該是這樣的：
setTimeout(): 該函數能夠按照設定的時間值延遲執行其中的事件。
setInterval(): 該函數能夠按照設定的時間值作為間隔，周期性的執行其中的時間。
當然了，只是簡述，細節方面，我們在下面的部分給大家做講解。
首先是我們的setTimeout()函數，它的格式是怎么樣的呢：
setTimeout(function,times);
是的，就是這么簡單的格式，其中，我們需要兩個參數，分別是一個函數和一個int值，函數表示延遲一段時間后要執行的函數體，int值就是我們說的這段時間，例如我們看這段簡單的代碼：
setTimeout(function(){
alert("hello,setTimeout()");
}, 1000);運行之后，它會在1s的延遲之后，彈出一個彈框，其中1000的單位是毫秒！
學到這里，大家覺得很簡單，對嗎？好的，那我給一段代碼，大家猜一下它會輸出什么：
for (var i = 1; i <= 5; i++) {
setTimeout(function () {
alert(i)
}, 1000)
}哎，有人要說了，簡單啊，這不是輸出：1 2 3 4 5 嗎？
然而實際上是這樣的：【點我揭曉】
也就是，它輸出了5 5 5 5 5，所以這是為什么呢？因為setTimeout()是一個異步執行函數，說人話就是，它里面的函數體，并不會在每一次執行的時候立刻運行，而是會丟進執行隊列中，等待"主線任務"全部完成，才會執行它。
于是在5次for循環后，i的值是5，傳進去，彈出了5個5。
那么有沒有解法呢？我給大家兩種解法：
1?? 使用關鍵字let：
for (let i = 1; i <= 5; i++) {
setTimeout(function () {
alert(i)
}, 1000)
}那為啥使用let就可以了呢：
其實使用let之后，也沒有改變執行機制，仍然是最后執行的alert()，但是let可以在每一次把更新的變量i傳進函數體內，也就是每一次的i加1之后，會把這個新值放進隊列中對應的函數內，于是就解出了這個問題。
2?? 定義一個外部變量：
我們在外部定義一個變量，這樣這個變量每一次會被放入隊列中，依舊不改變本身的執行機制：
var j = 1;
for (i = 1; i <= 5; i++) {
setTimeout(function () {
alert(j)
j++;
}, 1000);
}第二種做法，更容易被別人看懂，也更適合做項目時實際使用。
第二個函數setInterval()就沒那么復雜了，但是它的功能確實很強大的，我們先看看它的使用格式：
setInterval(function,times);
依舊是兩個參數，同setTimeout()格式一致，它可以以設置的times為間隔來循環重復function，我們用一個小例子來測試一下：
setInterval(function(){
alert('hello,setInterval()');
}, 1000);運行之后，每過1秒，就會彈出一個彈窗，顯示這段話。
那運行之后，我們想當然會有一個問題，那就是可以在某個特定的時機讓它不再循環執行了嗎？答案是肯定滴，只不過我們需要定義一個setInterval()函數的對象，我們一般取名叫：timer：
var i = 5;
var timer = setInterval(function(){
i --;
if(i < 0){
clearInterval(timer);
}
alert('i');
}, 1000);上面的代碼中，我們給setInterval創建了一個對象叫timer，在外部我們定義了另一個變量i，之后我們每一次執行Interval內的函數時，就讓 i-1 ，減到0以下，清除定時器：
clearInterval(timer對象)；
上面這句話是清除定時器的代碼，傳入一個setInterval()函數的對象即可。
最后，我們用學習的setTimeout()函數和setInterval()函數聯動做一個新年倒計時案例吧：
我們想要這樣的效果：
首先，實現在屏幕上展示60秒倒計時；
在倒計時為0后，彈窗展示新年快樂！
有人看了這個說明，覺得那么我們的代碼應該是這樣的：
var element = document.getElementById("xin-nian")
var clock = 60;
var timer = null;
timer = setInterval(function () {
element.innerHTML = "新年倒計時：" + clock + " !";
console.log(clock)
clock--;
if (clock < 0) {
clearInterval(timer);
alert("新年快樂！");
}
}, 1000);乍一看，好像沒問題，但實際運行的時候，由于向html寫入內容有一個小延遲，會導致最后倒計時0這個數字沒被寫進去就會彈窗，因此我們要在倒計時最后一秒，用setTimeout()做一個小緩沖：
if (clock < 0) {
clearInterval(timer);
setTimeout(function () {
alert("新年快樂！")
}, 500)
}于是完整的代碼應該是這樣的：
<!DOCTYPE html>
<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>新年倒計時</title>
<style>
body {
background-image: url(./1.jpg);
}
</style>
</head>
<body>
<h2 id="xin-nian" ></h2>
<script>
var element = document.getElementById("xin-nian")
var clock = 60;
var timer = null;
timer = setInterval(function () {
element.innerHTML = "新年倒計時：" + clock + " !";
console.log(clock)
clock--;
if (clock < 0) {
clearInterval(timer);
setTimeout(function () {
alert("新年快樂！")
}, 500)
}
}, 1000);
</script>
</body>
</html>實現的效果是下面這樣的動圖：
感謝各位的閱讀，以上就是“JavaScript的setTimeout和setInterval怎么用”的內容了，經過本文的學習后，相信大家對JavaScript的setTimeout和setInterval怎么用這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
