鋪墊：關(guān)于定時(shí)器

定時(shí)器：設(shè)定一個(gè)定時(shí)器，并且設(shè)定了等到的時(shí)間，當(dāng)?shù)竭_(dá)指定的時(shí)間，瀏覽器會(huì)把對應(yīng)的方法執(zhí)行

1）常用的定時(shí)器

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

2）清除定時(shí)器

• clearInterval / clearTimeout

  這兩個(gè)方法中的任何一個(gè)都可以清除用任何方法創(chuàng)建的定時(shí)器

• 1.設(shè)置定時(shí)器會(huì)有一個(gè)返回值，這個(gè)值是一個(gè)數(shù)字，屬于定時(shí)器的編號(hào)，代表當(dāng)前是第幾個(gè)定時(shí)器（不管setTimeout還是etInterval創(chuàng)建定時(shí)器，這個(gè)編號(hào)會(huì)累加）

• 2.clearInterval(編號(hào)) / clearTimeout(編號(hào))

  根據(jù)序號(hào)清除瀏覽器中設(shè)定的定時(shí)器

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

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

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

二、JS中的異步編程：

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

三、瀏覽器是如何規(guī)劃同步異步機(jī)制？

• 1.瀏覽器是多線程的，JS是單線程的（瀏覽器只給JS執(zhí)行分配一個(gè)線程）
  • 單線程的特點(diǎn)：一次只能處理一件事情

進(jìn)程與線程

每一個(gè)應(yīng)用程序都可以理解為一個(gè)進(jìn)程（瀏覽器打開一個(gè)頁面，就相當(dāng)于開辟一個(gè)進(jìn)程），在一個(gè)程序中（進(jìn)程中），經(jīng)常會(huì)同時(shí)處理多個(gè)事情，此時(shí)需要分配多個(gè)線程區(qū)同時(shí)完成多項(xiàng)任務(wù)

• 2.瀏覽器在單線程當(dāng)中實(shí)現(xiàn)異步的機(jī)制，主要依賴于任務(wù)隊(duì)列完成的，瀏覽器中有兩個(gè)任務(wù)隊(duì)列：主任務(wù)隊(duì)列 & 等待任務(wù)隊(duì)列

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

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

測試程序反映時(shí)間

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

執(zhí)行題

題1

// 練習(xí)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 復(fù)制代碼

題2

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

題3

setTimeout(() => {console.log(1); }, 20); console.log(2); setTimeout(() => {console.log(3); }, 10); console.log(4); for (let i = 0; i < 90000000; i++) {// 此循環(huán)大概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 // 因?yàn)橹虚g有200ms的阻塞，所以在等待隊(duì)列里，先輸出阻塞前的 3 1 200ms結(jié)束后，輸出阻塞后的 6 8 復(fù)制代碼

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。