新手必看的js實作非同步方法

這次帶給大家新手必看的js實作非同步方法，新手必看js實現的注意事項有哪些，以下就是實戰案例，一起來看一下。

某天突然寫了個方法要從後台呼叫數據，顯示在前台頁面，但是輸出結果總是空undefined，無法得到數據。多方找資料才發現，原來是入了JS非同步的「坑」。

我們常常聽到單執行緒、多執行緒、同步、非同步這些概念，那麼這些東西到底是什麼呢？
那我們先從上面那幾個概念說起

單執行緒、多執行緒、同步、非同步基本理解

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

1.單線程就是只有一個主線的線程，程式碼從上往下順序運行，主線程負責執行程式的所有程式碼（UI展現以及刷新，網路請求，本地儲存等等）【一個執行緒要做所有的事情，想想都有點累呢】

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

光聽這些乾巴巴的理論是不是覺得有點暈？巧了，乍看之下的時候也暈。

在找資料的過程中，我發現了別人的這麼一個形象的比喻。

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

# 這麼說，應該更了解吧？

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

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

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

同步就是不掛電話一直等，直到工作人員告訴你有沒有房間。
非同步就是掛斷電話，你去做別的事情，例如吃飯喝水，工作人員查到了訊息再打電話告訴你。

那麼我們的主題來了

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的非同步機制了。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

JS與ajax同源策略在專案中如何使用

##canvas怎麼實現軌跡回放

以上是新手必看的js實作非同步方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！