【轉】javascript的非同步概念

標籤：多個   strong   廚房   是你   回呼函數   獨立   儲存   非同步   取資料   

某天突然寫了個方法要從後台調用資料，顯示在前台頁面，但是輸出結果總是空 undefined，得不到資料。多方找資料才發現，原來是入了 JS 非同步 “坑”。

我們常常聽到單線程、多線程、同步、非同步這些概念，那麼這些東西到底是什麼呢？ 那麼我們先從上面那幾個概念說起 o(￣▽￣) ブ

單線程、多線程、同步、非同步基本理解

每個正在啟動並執行程式（即進程）至少有一個線程，被稱為主線程。主線程在啟動程式時被建立，用於執行 main 函數。

• 單線程就是只有一個主線的線程，代碼從上往下順序運行，主線程負責執行程式的所有代碼（UI 展現以及重新整理，網路請求，本機存放區等等）【一個線程要做所有的事情，想想都有點累呢】

• 多線程顧名思義，就是有多個線程的程式，可以由使用者自主建立。使用者自主建立的若干進程相對於主線程而言就是子線程。子線程和主線程都是獨立的運行單元，各自的執行互不影響，因此能夠並發執行。

光聽這些乾巴巴的理論是不是覺得有點暈？ 巧了，我乍一看的時候也暈。 在找資料的過程中，我發現了別人的這麼一個形象的比喻。

打個比方，單線程就是你去廚房又燒飯又燒菜，一個人來回跑；多線程就是兩個人，一個單做飯，一個單做菜。

這麼說，應該更好理解了吧？

而什麼又是同步和非同步呢？

我們用一個簡單的生活例子來說明。

你打電話訂酒店，問工作人員有沒有房間，這時候，工作人員需要尋找有沒有房間才能回答你。

• 同步就是不掛電話一直等，直到工作人員告訴你有沒有房間。

• 非同步就是掛斷電話，你去做別的事情，比如吃飯喝水，工作人員查到了資訊再打電話告訴你。

那麼我們的主題來了

JS 的非同步作業是怎樣的呢？

JS 的執行環境是單線程的，也就是說，程式順序執行下來，一次只能執行一個任務，程式想要往下運行，就必須等待當前的任務執行完畢，不管當前的任務要執行多久（要是後面的程式急著跑出來可真的是等的很難受呢）。

為瞭解決後面程式等的難受的這個阻塞問題。JavaScript 有一種非同步處理模式，其實就是延時處理。

我們再來拋出例子來說明。

1.        var getUserInfo = function () {

2.            $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {

3.                return data;

4.            });

5.        }

6.        var data = getUserInfo();

7.        renderUserInfo(data)

getUserInfo 這個函數被調用，要取後台取資料，可能要耗費很多時間，這就要讓 renderUserInfo 一直等著，直到取出 data 才能運行。幸好 JS 有非同步作業，取資料的時候，不用 renderUserInfo 一直等著 data 取出來，而是直接執行。

這麼說的話，那麼這兩個函數到底是什麼順序執行的呐？不急，我們來調試一下：

1. var getUserInfo = function () {

2.            console.log(‘aaa‘);

3.            $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {

4.                console.log(‘bbb‘);

5.                return data;

6.            });

7.        }

8.        var data = getUserInfo();

9.        console.log(data);

10.        console.log(‘ccc‘);

11.        renderUserInfo(data);

順序執行下來的輸出原以為是 "aaa","bbb","ccc" 吧？

然而事情並沒有這麼簡單。我們來看一下控制台的輸出：

 

輸出的結果竟然不是順序的。 也就是說函數執行到 getJSON 取資料的時候，程式並沒有等它取出資料再執行下一步，而是跳過了取資料這一個階段，直接執行輸出 data 了，因此，data 也為空白。

這就是 JS 的非同步機制了。

自我總結：這個例子中的$.getJSON方法，是可以帶入一個回呼函數的，有了回呼函數之後，可以在執行長時間的進程，同時操作了回呼函數的內容。

【轉】javascript的非同步概念