某天突然寫了個(gè)方法要從后臺調(diào)用數(shù)據(jù)，顯示在前臺頁面，但是輸出結(jié)果總是空undefined，得不到數(shù)據(jù)。多方找資料才發(fā)現(xiàn)，原來是入了JS異步的“坑”。

創(chuàng)新互聯(lián)建站專注于甘德網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗(yàn)。 熱誠為您提供甘德營銷型網(wǎng)站建設(shè)，甘德網(wǎng)站制作、甘德網(wǎng)頁設(shè)計(jì)、甘德網(wǎng)站官網(wǎng)定制、小程序定制開發(fā)服務(wù)，打造甘德網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供甘德網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

我們常常聽到單線程、多線程、同步、異步這些概念，那么這些東西到底是什么呢？
那么我們先從上面那幾個(gè)概念說起

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

每個(gè)正在運(yùn)行的程序（即進(jìn)程）至少有一個(gè)線程，被稱為主線程。主線程在啟動程序時(shí)被創(chuàng)建，用于執(zhí)行main函數(shù)。

1.單線程就是只有一個(gè)主線的線程，代碼從上往下順序運(yùn)行，主線程負(fù)責(zé)執(zhí)行程序的所有代碼（UI展現(xiàn)以及刷新，網(wǎng)絡(luò)請求，本地存儲等等）【一個(gè)線程要做所有的事情，想想都有點(diǎn)累呢】

2.多線程顧名思義，就是有多個(gè)線程的程序，可以由用戶自主創(chuàng)建。用戶自主創(chuàng)建的若干進(jìn)程相對于主線程而言就是子線程。子線程和主線程都是獨(dú)立的運(yùn)行單元，各自的執(zhí)行互不影響，因此能夠并發(fā)執(zhí)行。

光聽這些干巴巴的理論是不是覺得有點(diǎn)暈？ 巧了，我乍一看的時(shí)候也暈。

在找資料的過程中，我發(fā)現(xiàn)了別人的這么一個(gè)形象的比喻。

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

這么說，應(yīng)該更好理解了吧？

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

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

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

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

那么我們的主題來了

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

JS的執(zhí)行環(huán)境是單線程的，也就是說，程序順序執(zhí)行下來，一次只能執(zhí)行一個(gè)任務(wù)，程序想要往下運(yùn)行，就必須等待當(dāng)前的任務(wù)執(zhí)行完畢，不管當(dāng)前的任務(wù)要執(zhí)行多久（要是后面的程序急著跑出來可真的是等的很難受呢）。

為了解決后面程序等的難受的這個(gè)阻塞問題。JavaScript有一種異步處理模式，其實(shí)就是延時(shí)處理。

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

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

getUserInfo這個(gè)函數(shù)被調(diào)用，要取后臺取數(shù)據(jù)，可能要耗費(fèi)很多時(shí)間，這就要讓renderUserInfo一直等著，直到取出data才能運(yùn)行。幸好JS有異步操作，取數(shù)據(jù)的時(shí)候，不用renderUserInfo一直等著data取出來，而是直接執(zhí)行。

這么說的話，那么這兩個(gè)函數(shù)到底是什么順序執(zhí)行的吶？不急，我們來調(diào)試一下：

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);

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

然而事情并沒有這么簡單。我們來看一下控制臺的輸出：

輸出的結(jié)果竟然不是順序的。

也就是說函數(shù)執(zhí)行到getJSON取數(shù)據(jù)的時(shí)候，程序并沒有等它取出數(shù)據(jù)再執(zhí)行下一步，而是跳過了取數(shù)據(jù)這一個(gè)階段，直接執(zhí)行輸出data了，因此，data也為空。

這就是JS的異步機(jī)制了。

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

文章標(biāo)題：寫給小白看的JavaScript異步
文章轉(zhuǎn)載：http://jinyejixie.com/article34/posdpe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站導(dǎo)航、App開發(fā)、定制開發(fā)、全網(wǎng)營銷推廣、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)