首頁 > web前端 > js教程 > 主體

有關JavaScript異步(詳細教學)

亚连
發布: 2018-06-23 15:41:05
原創
1078 人瀏覽過

寫給小白看的JavaScript異步,具有一定的參考價值,有興趣的小伙伴們可以參考一下

某天突然寫了個方法要從後台調用數據,顯示在前台頁面,但是輸出結果總是空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的非同步機制了。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

使用JavaScript如何實現左側選單效果

#在JavaScript中如何實作全選取消效果

在vue.js中如何呼叫vuex儲存介面資料

以上是有關JavaScript異步(詳細教學)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板