鋪墊：關于定時器

定時器：設定一個定時器，并且設定了等到的時間，當到達指定的時間，瀏覽器會把對應的方法執行

1）常用的定時器

• 1.setTimeout(function,intarval) 執行一次
• 2.setInterval(function,intarval) 可執行多次
• function: 到達時間后執行的方法（設置定時器的時候方法沒有執行，到達時間后瀏覽器幫我們執行）
• interval: 時間因子（需要等待的時間 ms）

2）清除定時器

• clearInterval / clearTimeout

  這兩個方法中的任何一個都可以清除用任何方法創建的定時器

• 1.設置定時器會有一個返回值，這個值是一個數字，屬于定時器的編號，代表當前是第幾個定時器（不管setTimeout還是etInterval創建定時器，這個編號會累加）

• 2.clearInterval(編號) / clearTimeout(編號)

  根據序號清除瀏覽器中設定的定時器

// 執行一次 let count = 0; setTimeout(()=>{count++;console.log(count) },1000) 復制代碼 // 輪循定時器：每間隔interval這么長時間，都會把設定的方法重新執行一次，直到定時器被清除 let count = 0; let timer1 = setInterval(()=>{count++;console.log(count)if(count === 5){// 清除定時器clearInterval(timer1)} },1000);let timer2 = setInterval(()=>{},1000); 復制代碼

一、JS中的同步編程和異步編程：

• 同步編程：任務是按照順序依次處理，當前這件事沒有徹底做完，下一件事不能執行
• 異步編程：當前這件事沒有徹底做完，需要等待一段時間才能繼續處理，此時我們不等，繼續執行下面的任務，當后面任務完成后，再去把沒有徹底完成的事情完成

二、JS中的異步編程：

• 1.所有的事件綁定都是異步編程
  • xxx.onclick = function(){}
• 2.所有定時器都是異步編程
  • setTimeout(function(){},1000)
• 3.AJAX中一般都使用異步編程處理
• 4.回調函數也算是異步編程

三、瀏覽器是如何規劃同步異步機制？

• 1.瀏覽器是多線程的，JS是單線程的（瀏覽器只給JS執行分配一個線程）
  • 單線程的特點：一次只能處理一件事情

進程與線程

每一個應用程序都可以理解為一個進程（瀏覽器打開一個頁面，就相當于開辟一個進程），在一個程序中（進程中），經常會同時處理多個事情，此時需要分配多個線程區同時完成多項任務

• 2.瀏覽器在單線程當中實現異步的機制，主要依賴于任務隊列完成的，瀏覽器中有兩個任務隊列：主任務隊列 & 等待任務隊列

let n = 0; setTimeout(()=>{console.log(++n); //=> 第二次輸出：過1s輸出1 },1000) console.log(n); //=> 第一次輸出：0 復制代碼

// 定時器設定一個時間，到達時間后不一定執行（如果當前還有其他同步任務正在處理，那么到時間也得等著） let n = 0; setTimeout(()=>{console.log(++n); },1000) console.log(n); //=> 0 while(1===1){// 死循環 } 復制代碼

測試程序反映時間

let startTime = new Date(); console.time('AA') for (let i = 0; i < 900000000; i++) {} console.timeEnd('AA') //200多ms 復制代碼

執行題

題1

// 練習1 setTimeout(()=>{console.log(1); },20); console.log(2); setTimeout(()=>{console.log(3); },10); setTimeout(()=>{console.log(4); },100); for (let i = 0; i <90000000; i++) {} console.log(5); // 2 5 3 1 4 復制代碼

題2

// 練習2 let n = 0; setTimeout(()=>{console.log(++n); },0); // 定時器時間因子設置為0也不是立即執行，每一個瀏覽器都有一個自己最小的等待和反應時間（谷歌：5-6 IE:10-13)，所以寫0還是異步編程 console.log(n) // 0 1 復制代碼

題3

setTimeout(() => {console.log(1); }, 20); console.log(2); setTimeout(() => {console.log(3); }, 10); console.log(4); for (let i = 0; i < 90000000; i++) {// 此循環大概200ms } console.log(5); setTimeout(() => {console.log(6); }, 8); console.log(7); setTimeout(() => {console.log(8); }, 15); console.log(9); // 2 4 5 7 9 3 1 6 8 // 因為中間有200ms的阻塞，所以在等待隊列里，先輸出阻塞前的 3 1 200ms結束后，輸出阻塞后的 6 8 復制代碼

總結

以上是生活随笔為你收集整理的JS笔记(20): JS中的同步编程和异步编程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。