區別：

setTimeout(fn,t)：

延遲呼叫，超過了時間就呼叫回撥函式，返回一個id，使用clearTimeout(id)取消執行。
注意：取消了裡面的回撥函式就不執行了哦，而不是取消的時候就立即執行，下面有原始碼可以自己cv試一下。

setInterval(fn,t)：

迴圈呼叫，有周期性的呼叫回撥函式，返回一個id，使用clearInterval(id)取消執行。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鳥教程(runoob.com)</title>
<script>
console.log('333333333333333333333')
var aa =setTimeout(()=>{
    console.log("11111111111111")
},6000)
setTimeout(()=>{
    clearTimeout(aa)
    console.log("2222222222")
},3000)
</script>
</head>
<body>

</body>
</html>

在學習這兩種延遲函式之前要最好是先了解一下JS單執行緒和任務佇列；

舉個栗子：

在廣場上，只有一家一點點奶茶店（cpu），然後我（一個任務）要去買奶茶(執行這個任務)，只能排一條隊（js的單執行緒機制），雖說排隊（主執行緒）的人很多，但是一點點工作人員工作速度確實很快，一般的人付完現金就完了（synchronous同步任務），但是到了我的時候，我想用支付寶支付，但是開啟支付寶需要網路，需要等待支付寶軟體開啟（asynchronous非同步任務，等待IO裝置返回結果），但是為了不影響佇列後面的排隊者的速度，所以一點點的工作人員讓我去旁邊的佇列裡（任務佇列）去等待，這個佇列裡面有加我一起有三個人在啟動支付寶，我排在第三，然後一段時間過後，我的和第一個人支付寶打開了（IO裝置返回結果了

），第二個人沒開啟，我和第一個人就把二維碼展示出來（在任務佇列中新增一個事件，表示相關非同步任務可以進入主執行緒執行了），但是這個時候主佇列裡面還有一些人在買奶茶，所以，現在工作人員顧不上我，然後我們就只能一直等待，直到主佇列裡面買奶茶的人都走光了，這個時候工作人員就把我和第一個人加入主佇列中，然後我和第一個人就相繼都買到奶茶了，主佇列又沒有人了，於是工作人員又去問第二個人二維碼有沒有出來，（這個過程叫Event Loop（事件迴圈）），至此基本的單執行緒和任務佇列就完了，下面再瞭解一下定時器的特殊原理。

setTimeout(fn,t)

同樣的，又是我（setTimeout(fn,20)函式

）去買奶茶，我首先還是去排隊，到我的時候我說我現在不想買，我要等到20（設定的時長）毫秒之後再買，工作人員就說，好，那你去任務佇列裡面去等20毫秒吧，然後我就屁顛屁顛的去了，20毫秒後，還是老樣子，工作人員要等到主佇列裡面人都走完了再把我拉到主佇列裡面去，所以我實際等待的時間=我設定的時間+設定時間到了之後主佇列裡面執行的時間，但是慶幸的是工作人員工作速度非常快，所以一般主佇列裡面是沒有人的。

注意：

1、所以即使你設定超時時間為0，工作人員也不會立馬執行你哦，還是會把你加到任務佇列中的，誰叫你是asynchronous（非同步任務）

2、你設定超時時間有用嗎？時間上是沒有生效的，因為html5標準規定了setTimeout設定超時時間最小值是4毫秒，如果低於這個值就會自動增加，老版本瀏覽器更將是把最短時間設為10毫秒，而最要命的是，如果涉及到DOM的變動的都是16毫秒一次。

setInterval(fu,t)

同樣的，鳴人（setInterval(fn,1000)函式）去買奶茶，首先還是去排隊，到鳴人的時候，它不僅要在1秒鐘之後買，還要影分身出很多鳴人相繼在1、2、3、4...之後買，工作人員同樣要他和他的影分身在任務佇列後面排隊等會，正常情況下，主佇列沒人了，鳴人和他的影分身們也會在規定的時間裡面相繼執行。

那麼問題來了

假如每個鳴人都很喜歡逼逼叨叨，那麼就會發生這樣子的情況：

當一秒鐘後第一個鳴人從任務佇列中到主佇列中的時候，就一直跟工作人員逼逼叨叨（發生阻塞了，例如遇到迴圈不玩的for），直到第四秒鐘才說完（也就是b了3秒鐘），這個時候第二個鳴人已經超過預定時間的兩秒鐘了，然後等到第二個鳴人和工作人員聊得時候又逼逼叨叨不停，又要b3秒鐘，所以第二個鳴人會在第7秒b完，同理，第三個和第四個分別在第10秒和第13秒b完。

鳴人逼逼叨叨的過程如下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>uaoie.top</title>
<script>
console.log('333333333333333333333')
var y=0;
var x = new Date().getTime();
var d=setInterval(a,1000);
function a() {
    y++;
   sleep(3000);
    if(y>=4){
        clearInterval(d)
    }
console.log(new Date().getTime()-x);
}
function sleep(sleepTime){
    var start=new Date().getTime();
    while(true){
        if(new Date().getTime()-start>sleepTime){
            break;    
        }
    }
}
</script>
</head>
<body>
</body>
</html>

導致的情況如下：

全劇終

八、彩蛋

現在我們可以很輕鬆的分析一下下面程式碼的原理（雖然我們都知道結果）：

var aa=new Date().getTime()
for (var i = 0; i < 4; i++) {
    setTimeout(function() {
        console.log(new Date().getTime() -aa, i);
    }, 1000);
}
console.log(new Date().getTime() -aa, i);

先執行第一行，完了後執行for，迴圈4次也就是執行4次setTimeout函式，這個4個函式同時放在任務佇列中。
然後再執行最下面的config，所以會先列印0秒和4。
然後等到一秒後，setTimeout函式從任務佇列中出來到主佇列，輸出的是1秒和4。
所以效果如下：

用故事解析setTimeout和setInterval(內含js單執行緒和任務佇列)

區別：

setTimeout(fn,t)：

setInterval(fn,t)：

在學習這兩種延遲函式之前要最好是先了解一下JS單執行緒和任務佇列；

舉個栗子：

setTimeout(fn,t)

setInterval(fu,t)

那麼問題來了

全劇終

八、彩蛋

用故事解析setTimeout和setInterval(內含js單執行緒和任務佇列)

js單執行緒和非同步並不衝突

JavaScript——從setTimeout()的執行了解js的單執行緒和非同步

js的單執行緒和非同步

js的單執行緒和瀏覽器的多執行緒

Python-爬取妹子圖(單執行緒和多執行緒版本)

Python-爬取校花網視訊(單執行緒和多執行緒版本)

02-node.js 單執行緒，‘ 非同步’非阻塞io

python-同步和非同步、阻塞和非阻塞、序列和並行、並行和併發、密集型、執行緒和程序的相關概念

以生活的例子說明單執行緒和多執行緒

python 單執行緒和多執行緒

JavaScript的單執行緒和非同步

SpringBoot 定時執行緒配置單執行緒和多執行緒

C++11:基於std::queue和std::mutex構建一個執行緒安全的佇列

js單執行緒與java多執行緒、同步與非同步

Spring Boot 定時任務單執行緒和多執行緒

C# 單執行緒和多執行緒下的單例模式的實現

淺析 Node.js 單執行緒模型

多執行緒不能不知道的之單執行緒和多執行緒的比較

理解js單執行緒非同步機制

用故事解析setTimeout和setInterval(內含js單執行緒和任務佇列)

區別：

setTimeout(fn,t)：

setInterval(fn,t)：

在學習這兩種延遲函式之前要最好是先了解一下JS單執行緒和任務佇列；

舉個栗子：

setTimeout(fn,t)

setInterval(fu,t)

那麼問題來了

全劇終

八、彩蛋

相關推薦