資訊專欄INFORMATION COLUMN
摘要：主線程在啟動(dòng)程序時(shí)被創(chuàng)建，用于執(zhí)行函數(shù)。用戶自主創(chuàng)建的若干進(jìn)程相對(duì)于主線程而言就是子線程。子線程和主線程都是獨(dú)立的運(yùn)行單元，各自的執(zhí)行互不影響，因此能夠并發(fā)執(zhí)行。這就是的異步機(jī)制了。
某天突然寫了個(gè)方法要從后臺(tái)調(diào)用數(shù)據(jù)，顯示在前臺(tái)頁(yè)面，但是輸出結(jié)果總是空undefined，得不到數(shù)據(jù)。多方找資料才發(fā)現(xiàn)，原來(lái)是入了JS異步的“坑”。
我們常常聽到單線程、多線程、同步、異步這些概念，那么這些東西到底是什么呢？
那么我們先從上面那幾個(gè)概念說(shuō)起 o(￣▽￣)ブ
每個(gè)正在運(yùn)行的程序（即進(jìn)程）至少有一個(gè)線程，被稱為主線程。主線程在啟動(dòng)程序時(shí)被創(chuàng)建，用于執(zhí)行main函數(shù)。
單線程就是只有一個(gè)主線的線程，代碼從上往下順序運(yùn)行，主線程負(fù)責(zé)執(zhí)行程序的所有代碼（UI展現(xiàn)以及刷新，網(wǎng)絡(luò)請(qǐng)求，本地存儲(chǔ)等等）【一個(gè)線程要做所有的事情，想想都有點(diǎn)累呢】
多線程顧名思義，就是有多個(gè)線程的程序，可以由用戶自主創(chuàng)建。用戶自主創(chuàng)建的若干進(jìn)程相對(duì)于主線程而言就是子線程。子線程和主線程都是獨(dú)立的運(yùn)行單元，各自的執(zhí)行互不影響，因此能夠并發(fā)執(zhí)行。
光聽這些干巴巴的理論是不是覺(jué)得有點(diǎn)暈？ 巧了，我乍一看的時(shí)候也暈。
在找資料的過(guò)程中，我發(fā)現(xiàn)了別人的這么一個(gè)形象的比喻。
打個(gè)比方，單線程就是你去廚房又燒飯又燒菜，一個(gè)人來(lái)回跑；多線程就是兩個(gè)人，一個(gè)單做飯，一個(gè)單做菜。
這么說(shuō)，應(yīng)該更好理解了吧？
而什么又是同步和異步呢？
我們用一個(gè)簡(jiǎn)單的生活例子來(lái)說(shuō)明。
你打電話訂酒店，問(wèn)工作人員有沒(méi)有房間，這時(shí)候，工作人員需要查找有沒(méi)有房間才能回答你。
同步就是不掛電話一直等，直到工作人員告訴你有沒(méi)有房間。
異步就是掛斷電話，你去做別的事情，比如吃飯喝水，工作人員查到了信息再打電話告訴你。
那么我們的主題來(lái)了
JS的異步操作是怎樣的呢？JS的執(zhí)行環(huán)境是單線程的，也就是說(shuō)，程序順序執(zhí)行下來(lái)，一次只能執(zhí)行一個(gè)任務(wù)，程序想要往下運(yùn)行，就必須等待當(dāng)前的任務(wù)執(zhí)行完畢，不管當(dāng)前的任務(wù)要執(zhí)行多久（要是后面的程序急著跑出來(lái)可真的是等的很難受呢）。
為了解決后面程序等的難受的這個(gè)阻塞問(wèn)題。JavaScript有一種異步處理模式，其實(shí)就是延時(shí)處理。
我們?cè)賮?lái)拋出例子來(lái)說(shuō)明。
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)用，要取后臺(tái)取數(shù)據(jù)，可能要耗費(fèi)很多時(shí)間，這就要讓renderUserInfo一直等著，直到取出data才能運(yùn)行。幸好JS有異步操作，取數(shù)據(jù)的時(shí)候，不用renderUserInfo一直等著data取出來(lái)，而是直接執(zhí)行。
這么說(shuō)的話，那么這兩個(gè)函數(shù)到底是什么順序執(zhí)行的吶？不急，我們來(lái)調(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í)行下來(lái)的輸出原以為是"aaa","bbb","ccc"吧？
然而事情并沒(méi)有這么簡(jiǎn)單。我們來(lái)看一下控制臺(tái)的輸出：
輸出的結(jié)果竟然不是順序的。
也就是說(shuō)函數(shù)執(zhí)行到getJSON取數(shù)據(jù)的時(shí)候，程序并沒(méi)有等它取出數(shù)據(jù)再執(zhí)行下一步，而是跳過(guò)了取數(shù)據(jù)這一個(gè)階段，直接執(zhí)行輸出data了，因此，data也為空。
這就是JS的異步機(jī)制了。
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/89799.html
摘要：前端平時(shí)接觸到的機(jī)會(huì)并不多，但是懂點(diǎn)對(duì)于前端來(lái)說(shuō)還是有益無(wú)害的，起碼還是要了解一下最基本的部署知識(shí)。特別注意的是，國(guó)內(nèi)注冊(cè)的域名要實(shí)名備案，否則無(wú)法域名解析。 前端平時(shí)接觸到linux的機(jī)會(huì)并不多，但是懂點(diǎn)linux對(duì)于前端來(lái)說(shuō)還是有益無(wú)害的，起碼還是要了解一下最基本的部署知識(shí)。 博客地址 購(gòu)買服務(wù)器 要部署項(xiàng)目，首先我們需要一臺(tái)服務(wù)器。平時(shí)開發(fā)，項(xiàng)目是跑在我們本地電腦上的，現(xiàn)在我們想...
摘要：而在這個(gè)革命的所有這些領(lǐng)域中數(shù)據(jù)壓縮都是基礎(chǔ)支撐技術(shù)之一。說(shuō)完了數(shù)據(jù)壓縮的概念我們將注意力回到之前的問(wèn)題上分別進(jìn)行解釋。而通過(guò)數(shù)據(jù)壓縮我們可以提高其傳輸能力降低存儲(chǔ)的空間。而在設(shè)計(jì)出種數(shù)據(jù)壓縮方案之后我們還需要能夠測(cè)量它的性能。 原文地址:http://blog.52sox.com/data-co... 網(wǎng)上戲說(shuō)2018是互聯(lián)網(wǎng)的冬天,先有阿里、騰訊、華為不擴(kuò)招進(jìn)行人員優(yōu)化,后有美...
摘要：而在這個(gè)革命的所有這些領(lǐng)域中數(shù)據(jù)壓縮都是基礎(chǔ)支撐技術(shù)之一。說(shuō)完了數(shù)據(jù)壓縮的概念我們將注意力回到之前的問(wèn)題上分別進(jìn)行解釋。而通過(guò)數(shù)據(jù)壓縮我們可以提高其傳輸能力降低存儲(chǔ)的空間。而在設(shè)計(jì)出種數(shù)據(jù)壓縮方案之后我們還需要能夠測(cè)量它的性能。 原文地址:http://blog.52sox.com/data-co... 網(wǎng)上戲說(shuō)2018是互聯(lián)網(wǎng)的冬天,先有阿里、騰訊、華為不擴(kuò)招進(jìn)行人員優(yōu)化,后有美...
閱讀 2093·2023-04-25 17:57
閱讀 1293·2021-11-24 09:39
閱讀 2492·2019-08-29 16:39
閱讀 3321·2019-08-29 13:44
閱讀 3137·2019-08-29 13:14
閱讀 2328·2019-08-26 11:36
閱讀 3823·2019-08-26 11:00
閱讀 955·2019-08-26 10:14
