單線程的JS

眾所周知js是一門單線程語言，即同一時間只能做一件事。為什么js是單線程的呢，主要與它的用途有關。

作為瀏覽器腳本語言，js的主要用途是和用戶互動&操作DOM，我們并不想并行的操作DOM。如果不是單線程的話，我們一個線程在給DOM節點上添加內容，另一個線程卻刪除了這個節點，到底該以哪個為準呢？

所以為了避免復雜性，從一誕生，JavaScript 就是單線程。

事件循環（event loop)

JS是一門單線程語言，意味著代碼要一行一行的執行。所有任務都要排隊，前一個任務結束，才會執行后一個任務。

但平時大家開發時常用到的ajax,setTimeOut,promise之類的并沒有阻塞進程。如果瀏覽器只有一個js引擎構成，遇到上面這些比較耗時的請求或操作時，瀏覽器就會阻塞住，這肯定不是我們想要的。

其實js單線程是指瀏覽器在解釋和執行js代碼時只有一個線程，即js引擎線程。但瀏覽器還包括一些其他的線程來處理這些異步的方法，比如Web APIs線程，GUI渲染線程等。

事件循環的處理流程：

JS線程依靠調用棧來處理執行js代碼，當遇到一些異步的操作時，則將其移交給Web APIs，自己繼續往下進行。Web APIs線程則將收到的事件按一定的規則和順序添加到任務隊列里去。JS線程處理完當前所有任務(即執行棧為空),則去檢查任務隊列里是否有等待被處理的事件，若有，則取出一個事件回調放入執行棧中執行。然后不斷循環第三步。

宏任務與微任務

任務隊列又分為宏任務隊列和微任務隊列：

宏任務隊列(macrotask queue)：存放的是setTimeout, setInterval, setImmediate, I/O, UI rendering等。 微任務隊列(microtask queue)：存放的是Promises, Object.observe, MutationObserver，process.nextTick等。

所以我們細化一下事件循環的處理流程（瀏覽器環境）：

JS線程依靠調用棧來處理執行js代碼，當遇到一些異步的操作時，則將其移交給Web APIs，自己繼續往下進行。Web APIs線程則將收到的事件按一定的規則和順序添加到任務隊列里去。宏任務事件則添加到宏任務隊列，微任務事件則添加到微任務隊列。JS線程處理完當前所有任務(即執行棧為空),會先去微任務隊列檢查是否有待處理的事件，若有，會將微任務隊列里的所有事件一件件執行完直到微任務隊列為空，再去宏任務隊列取出最前面的一個事件執行，執行完這一個宏任務事件后再去檢查微任務隊列是否有事件待處理。然后不斷循環第三步。

實際需求中重學JavaScript事件循環

什么是JS事件循環？

在秋招的時候經常會被問到這個問題，但自己的理解僅限于以上，然后刷過幾道輸出值順序的題目，沒有過業務中的實際應用場景。后來拿到offer后就忘的一干二凈了，直到畢業入職后開始寫代碼重新遇到了這才有了更深一步的理解。

背景用戶上傳多張圖片，前端拿到每張圖片的url和寬高發送給后端。

解決首先是拿到用戶上傳的文件，做一些校驗和限制

// 調用系統彈框添加圖片的方法addFile(e) { let uploadFiles = e.target.files，self = this; self.getListData = []; // 要傳給后端的對象數組 self.testFiles(uploadFiles) // 對用戶上傳的文件做一些校驗和限制 self.loadAll(uploadiles) // 調用loadAll方法},

然后讓我們看一下loadAll，主要是遍歷上傳的這些圖片文件，然后每一個圖片文件都調用了loadImg

loadAll(files) { let promises = [],self = this // 遍歷文件流 files.forEach((file,i) => { // 創建對象，push到數組里 (self.getListData).push({ imageUrl: ’’, }); let eachPromise = self.loadImg(file,i) // 存儲當前promise對象 promises.push(eachPromise) }) Promise.all(promises).then(() => { //全部完成，向后端發送請求 }).catch(err => { console.log(err) })},

然后讓我們看一下loadImg，這個方法返回一個Promise對象，主要是為了保證拿到圖片的URL以及在img.onload里拿到圖片的寬高，因為這兩個事件都是異步事件。

實際上js主線程是不會等待這兩個結果，就會繼續往下執行的。但因為我們在img.onload里才會把Promise給resolve出去，而loadAll方法里用了一個Promise.all來等待所有promise都完成，這樣就可以保證向后端發送請求時所有的圖片的url和寬高都能拿到。

loadImg(file,i) { return new Promise(async (resolve,reject) => { let self = this // 調用公司wos服務，拿圖片文件的url let successRes = await _fileUpload.uploadFile(item) if(successRes && successRes !== ’error’){ self.getListData[i][’imageUrl’] = successRes.url } let img = new Image() img.src = successRes.url img.onload = () => { self.getListData[i][’width’] = img.width self.getListData[i][’height’] = img.height resolve() } img.onerror = (e) => { reject(e) } })}

讓我們想一下如果把loadImg里拿圖片的url這個操作放到loadAll里呢？

loadAll(files) { let promises = [],self = this // 遍歷文件流 files.forEach(async(file,i) => { // 創建對象，push到數組里 (self.getListData).push({ imageUrl: ’’, }); // 調用公司wos服務，拿圖片文件的url let successRes = await _fileUpload.uploadFile(item) if(successRes && successRes !== ’error’){ self.getListData[i][’imageUrl’] = successRes.url } let eachPromise = self.loadImg(file,i) // 存儲當前promise對象 promises.push(eachPromise) }) Promise.all(promises).then(() => { //全部完成，向后端發送請求 }).catch(err => { console.log(err) })},

如果變成這種寫法，因為js的主線程執行棧不會等待await返回結果，循環里await _fileUpload.uploadFile(item)這行代碼后面的內容會被交給Web APIs然后跳出async函數。繼續執行主線程，而現在Promise.all的參數是一個空數組，然后就直接發了請求。但現在并沒有拿到圖片的URL和寬高。

關鍵字await只能使async函數一直等待，執行棧當然不可能停下來等待的，await將其后面的內容包裝成Promise交給Web APIs后，執行棧會跳出async函數繼續執行，直到Promise執行完并返回結果。await只在async函數里面奏效。

總結

從上面這個需求的實現中，好像對事件循環的理解更深刻了！像Promise.then里和await后面的代碼都會等待返回結果后再被放入對應事件的任務隊列中等待執行，JS線程會繼續向下執行調用棧。包括vue中的watch handler也是被先放入了任務隊列里等待。

所以可知事件循環在實際工作中對寫代碼和優化代碼都非常重要～如理解有誤請在評論區多多指教。

以上就是在實例中重學JavaScript事件循環的詳細內容，更多關于JavaScript 事件循環的資料請關注好吧啦網其它相關文章！