JS筆記(20): JS中的同步編程和異步編程

鋪墊：關於定時器

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

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);
複製代碼

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

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

2、JS中的異步編程：

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

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

• 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 
複製代碼