寫給小白看的JavaScript異步
某天突然寫了個(gè)方法要從后臺(tái)調(diào)用數(shù)據(jù),顯示在前臺(tái)頁面,但是輸出結(jié)果總是空undefined,得不到數(shù)據(jù)。多方找資料才發(fā)現(xiàn),原來是入了JS異步的“坑”。
我們常常聽到單線程、多線程、同步、異步這些概念,那么這些東西到底是什么呢?
那么我們先從上面那幾個(gè)概念說起
單線程、多線程、同步、異步基本理解
每個(gè)正在運(yùn)行的程序(即進(jìn)程)至少有一個(gè)線程,被稱為主線程。主線程在啟動(dòng)程序時(shí)被創(chuàng)建,用于執(zhí)行main函數(shù)。
1.單線程就是只有一個(gè)主線的線程,代碼從上往下順序運(yùn)行,主線程負(fù)責(zé)執(zhí)行程序的所有代碼(UI展現(xiàn)以及刷新,網(wǎng)絡(luò)請(qǐng)求,本地存儲(chǔ)等等)【一個(gè)線程要做所有的事情,想想都有點(diǎn)累呢】
2.多線程顧名思義,就是有多個(gè)線程的程序,可以由用戶自主創(chuàng)建。用戶自主創(chuàng)建的若干進(jìn)程相對(duì)于主線程而言就是子線程。子線程和主線程都是獨(dú)立的運(yùn)行單元,各自的執(zhí)行互不影響,因此能夠并發(fā)執(zhí)行。
光聽這些干巴巴的理論是不是覺得有點(diǎn)暈? 巧了,我乍一看的時(shí)候也暈。
在找資料的過程中,我發(fā)現(xiàn)了別人的這么一個(gè)形象的比喻。
打個(gè)比方,單線程就是你去廚房又燒飯又燒菜,一個(gè)人來回跑;多線程就是兩個(gè)人,一個(gè)單做飯,一個(gè)單做菜。
這么說,應(yīng)該更好理解了吧?
而什么又是同步和異步呢?
我們用一個(gè)簡(jiǎn)單的生活例子來說明。
你打電話訂酒店,問工作人員有沒有房間,這時(shí)候,工作人員需要查找有沒有房間才能回答你。
同步就是不掛電話一直等,直到工作人員告訴你有沒有房間。
異步就是掛斷電話,你去做別的事情,比如吃飯喝水,工作人員查到了信息再打電話告訴你。
那么我們的主題來了
JS的異步操作是怎樣的呢?
JS的執(zhí)行環(huán)境是單線程的,也就是說,程序順序執(zhí)行下來,一次只能執(zhí)行一個(gè)任務(wù),程序想要往下運(yùn)行,就必須等待當(dāng)前的任務(wù)執(zhí)行完畢,不管當(dāng)前的任務(wù)要執(zhí)行多久(要是后面的程序急著跑出來可真的是等的很難受呢)。
為了解決后面程序等的難受的這個(gè)阻塞問題。JavaScript有一種異步處理模式,其實(shí)就是延時(shí)處理。
我們?cè)賮頀伋隼觼碚f明。
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取出來,而是直接執(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ǎn)單。我們來看一下控制臺(tái)的輸出:
輸出的結(jié)果竟然不是順序的。
也就是說函數(shù)執(zhí)行到getJSON取數(shù)據(jù)的時(shí)候,程序并沒有等它取出數(shù)據(jù)再執(zhí)行下一步,而是跳過了取數(shù)據(jù)這一個(gè)階段,直接執(zhí)行輸出data了,因此,data也為空。
這就是JS的異步機(jī)制了。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js異步加載的三種解決方案
- jQuery Ajax異步處理Json數(shù)據(jù)詳解
- jquery的ajax異步請(qǐng)求接收返回json數(shù)據(jù)實(shí)例
- js中同步與異步處理的方法和區(qū)別總結(jié)
- Nodejs異步回調(diào)的優(yōu)雅處理方法
- 詳談 Jquery Ajax異步處理Json數(shù)據(jù).
- AMD異步模塊定義介紹和Require.js中使用jQuery及jQuery插件的方法
- angularjs 處理多個(gè)異步請(qǐng)求方法匯總
- Javascript 異步加載詳解(瀏覽器在javascript的加載方式)
- 使用jquery.upload.js實(shí)現(xiàn)異步上傳示例代碼
相關(guān)文章
微信小程序中使用自定義圖標(biāo)(阿里icon)的方法
這篇文章主要介紹了微信小程序中使用自定義圖標(biāo)(阿里icon)的方法,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-08-08使用typescript改造koa開發(fā)框架的實(shí)現(xiàn)
這篇文章主要介紹了使用typescript改造koa開發(fā)框架的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-02-02js中如何復(fù)制一個(gè)數(shù)組(淺復(fù)制、深復(fù)制)
這篇文章主要介紹了js中如何復(fù)制一個(gè)數(shù)組(淺復(fù)制、深復(fù)制)問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04js 賦值包含單引號(hào)雙引號(hào)問題的解決方法
這篇文章主要介紹了js賦值包含單引號(hào)雙引號(hào)問題的解決方法,需要的朋友可以參考下2014-02-02JS基于遞歸實(shí)現(xiàn)倒計(jì)時(shí)效果的方法
這篇文章主要介紹了JS基于遞歸實(shí)現(xiàn)倒計(jì)時(shí)效果的方法,結(jié)合實(shí)例形式分析了javascript基于遞歸算法實(shí)現(xiàn)倒計(jì)時(shí)功能的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作,結(jié)合具體實(shí)例形式分析了JavaScript事件響應(yīng)及table表格動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-10-10js實(shí)現(xiàn)購物車加減和價(jià)格運(yùn)算
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)購物車加減和價(jià)格運(yùn)算,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08JavaScript焦點(diǎn)事件、鼠標(biāo)事件和滾輪事件使用詳解
這篇文章主要介紹了JavaScript焦點(diǎn)事件、鼠標(biāo)事件和滾輪事件使用詳解,通過示例給大家講解的非常細(xì)致,有需要的小伙伴可以參考下。2016-01-01javascript實(shí)現(xiàn)網(wǎng)頁字符定位的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁字符定位的方法,實(shí)例分析了javascript頁面元素查找與定位的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-07-07