寫給小白看的JS異步

某天忽然寫了個方法要從後臺調用數據，顯示在前臺頁面，可是輸出結果老是空undefined，得不到數據。多方找資料才發現，原來是入了JS異步的「坑」。

咱們經常聽到單線程、多線程、同步、異步這些概念，那麼這些東西究竟是什麼呢？
那麼咱們先從上面那幾個概念提及 o(￣▽￣)ブ

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

每一個正在運行的程序（即進程）至少有一個線程，被稱爲主線程。主線程在啓動程序時被建立，用於執行main函數。

• 單線程就是隻有一個主線的線程，代碼從上往下順序運行，主線程負責執行程序的全部代碼（UI展示以及刷新，網絡請求，本地存儲等等）【一個線程要作全部的事情，想一想都有點累呢】

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

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

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

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

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

咱們用一個簡單的生活例子來講明。

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

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

• 異步就是掛斷電話，你去作別的事情，好比吃飯喝水，工做人員查到了信息再打電話告訴你。

那麼咱們的主題來了

JS的異步操做是怎樣的呢？

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

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

咱們再來拋出例子來講明。

var getUserInfo = function () {
            $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
                return data;
            });
        }
        var data = getUserInfo();
        renderUserInfo(data)

getUserInfo這個函數被調用，要取後臺取數據，可能要耗費不少時間，這就要讓renderUserInfo一直等着，直到取出data才能運行。幸虧JS有異步操做，取數據的時候，不用renderUserInfo一直等着data取出來，而是直接執行。

這麼說的話，那麼這兩個函數究竟是什麼順序執行的吶？不急，咱們來調試一下：

var getUserInfo = function () {
            console.log('aaa');
            $.getJSON("http://www.easy-mock.com/mock/5a09868228b23066479b8379/ajaxData/getUserInfo", function () {
                console.log('bbb');
                return data;
            });
        }
        var data = getUserInfo();
        console.log(data);
        console.log('ccc');
        renderUserInfo(data);

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

然而事情並無這麼簡單。咱們來看一下控制檯的輸出：

輸出的結果居然不是順序的。
也就是說函數執行到getJSON取數據的時候，程序並無等它取出數據再執行下一步，而是跳過了取數據這一個階段，直接執行輸出data了，所以，data也爲空。

這就是JS的異步機制了。