js異步編程小技巧詳解
更新時(shí)間：2017年08月14日 08:43:23 作者：moonpanda
這篇文章主要介紹了js異步編程技巧，使用計(jì)數(shù)器的方式，每完成一個(gè)請(qǐng)求計(jì)數(shù)器加1 當(dāng)計(jì)數(shù)器等于2時(shí)執(zhí)行回調(diào)邏輯,兩個(gè)http并行發(fā)送,從而極大的提高了效率,需要的朋友可以參考下
異步回調(diào)是js的一大特性，理解好用好這個(gè)特性可以寫出很高質(zhì)量的代碼。分享一些實(shí)際用的一些異步編程技巧。
1.我們有些應(yīng)用環(huán)境是需要等待兩個(gè)http請(qǐng)求或IO操作返回后進(jìn)行后續(xù)邏輯的處理。而這種情況使用回調(diào)嵌套代碼會(huì)顯得很難維護(hù)，而且也沒有充分使用js的異步優(yōu)勢(shì)。
看下實(shí)例（為了大家容易理解使用了jq作為示例）
$.get("獲取數(shù)據(jù)1.html",function(data,status){
$.get("獲取數(shù)據(jù)2.html",function(data1,status1){
//使用 data 和data1邏輯
});
});
這種代碼明顯需要等待上個(gè)ajax請(qǐng)求返回后才會(huì)進(jìn)行第二個(gè)請(qǐng)求，效率很低，而且回調(diào)嵌很不利于邏輯。我們可以使用計(jì)數(shù)器的方式，每完成一個(gè)請(qǐng)求計(jì)數(shù)器加1 當(dāng)計(jì)數(shù)器等于2時(shí)執(zhí)行回調(diào)邏輯
var get_data
var get-data1
function next(){
//使用 data 和data1邏輯
}
$.get("獲取數(shù)據(jù)1.html",function(data,status){
get_data=data
(++over === all) && (next());
});
$.get("獲取數(shù)據(jù)2.html",function(data1,status1){
get_data1=data1
(++over === all) && (next());
});
這種方式兩個(gè)http并行發(fā)送，極大的提高了效率
相關(guān)文章
如何在uniapp項(xiàng)目中嵌套H5 頁(yè)面
在UniApp中可以通過使用 web-view 組件來嵌入H5頁(yè)面,大概思路是在該頁(yè)面的template部分添加web-view組件,設(shè)置src屬性為所需嵌入的H5頁(yè)面地址,感興趣的朋友跟隨小編一起看看吧2024-02-02
本篇文章主要是對(duì)asp.net刷新本頁(yè)面的六種方法進(jìn)行了詳細(xì)的總結(jié)介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2014-01-01
在線所見即所得HTML編輯器的實(shí)現(xiàn)原理淺析
這篇文章主要介紹了在線所見即所得HTML編輯器的實(shí)現(xiàn)原理淺析,本文用初始化、打開編輯功能、獲取編輯器的內(nèi)容、增加樣式設(shè)置、再進(jìn)一步等步驟闡述在線編輯器的基本實(shí)現(xiàn)原理,需要的朋友可以參考下2015-04-04
這篇文章主要介紹了js如何根據(jù)id刪除數(shù)組中對(duì)象的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
這篇文章主要和大家談一談bootstrap響應(yīng)式布局，本教程講解如何在網(wǎng)頁(yè)布局中應(yīng)用響應(yīng)式設(shè)計(jì)，感興趣的小伙伴們可以參考一下2016-05-05
這篇文章主要介紹了使用fileReader的一個(gè)坑及解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-12-12
前端JavaScript數(shù)組方法總結(jié)(非常詳細(xì)!)
這篇文章主要介紹了JavaScript中數(shù)組對(duì)象的常用方法,包括數(shù)組的基本操作、查找、過濾、排序、遍歷等方法,并提供了每個(gè)方法的語(yǔ)法和示例,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2025-04-04
使用js實(shí)現(xiàn)按鈕控制文本框加1減1應(yīng)用于小時(shí)+分鐘
正如標(biāo)題所言使用js實(shí)現(xiàn)按鈕控制文本框加1減1，此類主要應(yīng)用于小時(shí)+分鐘，下面有個(gè)不錯(cuò)的示例，喜歡的朋友可以參考下2013-12-12
這篇文章主要介紹了webpack 處理CSS資源的實(shí)現(xiàn)，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
記一次webpack3升級(jí)webpack4的踩坑經(jīng)歷
這篇文章主要介紹了記一次webpack3升級(jí)webpack4的踩坑經(jīng)歷，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-06-06