jQuery中的ajax async同步和異步詳解
項(xiàng)目中有這樣一個(gè)需求，使用ajax加載數(shù)據(jù)返回頁(yè)面并賦值，然后前端取出該值
這其中涉及到代碼的順序問(wèn)題，有時(shí)后臺(tái)還未返回?cái)?shù)據(jù)，但已執(zhí)行后面代碼，
所以就會(huì)造成取不到值
$.ajax({ type: "post", url: "admin/PfmOptionRuleItem.do", success: function(data){ $("#ruleItem").val(data.ruleItem); //① } }); return $("#ruleItem").val(); //②
如果①還未從后臺(tái)返回?cái)?shù)據(jù) 此時(shí)執(zhí)行②就獲取不到值
Ajax的第一個(gè)字母是asynchronous的開(kāi)頭字母，這意味著所有的操作都是并行的，完成的順序沒(méi)有前后關(guān)系。
$.ajax()的async參數(shù)總是設(shè)置成true，這標(biāo)志著在請(qǐng)求開(kāi)始后，其他代碼依然能夠執(zhí)行。
如果把這個(gè)選項(xiàng)設(shè)置成false，這意味著所有的請(qǐng)求都不再是異步的了，這也會(huì)導(dǎo)致瀏覽器被鎖死。
雖然官方不建議這么干，只是不能用太多，否則會(huì)造成用戶體驗(yàn)不佳
舉個(gè)栗子
alert("setp 1"); $.ajax({ url: "admin/PfmOptionRuleItem.do", async: false, success: function(data){ alert("hello ajax"); //① } }); alert("setp 2"); //②
當(dāng)把a(bǔ)syn設(shè)為false時(shí)，這時(shí)ajax的請(qǐng)求時(shí)同步的，也就是說(shuō)，這個(gè)時(shí)候ajax塊發(fā)出請(qǐng)求后，
他會(huì)等待在①這個(gè)地方，不會(huì)去向下執(zhí)行②，直到①執(zhí)行完畢
此時(shí)依次執(zhí)行順序?yàn)?/p>
setp 1
hello ajax
setp 2
如果async為true 則執(zhí)行順序?yàn)?/p>
setp 1
setp 2
hello ajax
關(guān)于本文給大家敘述的jQuery中的ajax async同步和異步，全部介紹完了，希望對(duì)大家有所幫助。
相關(guān)文章
Jquery實(shí)現(xiàn)搜索框提示功能示例代碼
數(shù)據(jù)量很大的情況下使用Ajax去實(shí)現(xiàn)真的不合適，于是想采用Jquery來(lái)實(shí)現(xiàn)方法，具體的示例代碼如下，有需求的朋友可以參考下希望對(duì)大家有所幫助2013-08-08
jquery的ajax提交form表單的兩種方法小結(jié)(推薦)
下面小編就為大家?guī)?lái)一篇jquery的ajax提交form表單的兩種方法小結(jié)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考2016-05-05
基于jquery的一個(gè)簡(jiǎn)單的腳本驗(yàn)證插件
基于jquery的一個(gè)簡(jiǎn)單的腳本驗(yàn)證插件，希望能對(duì)大家有所幫助，有demo2010-04-04
jQuery實(shí)現(xiàn)獲取table表格第一列值的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)獲取table表格第一列值的方法,涉及jQuery針對(duì)table表格元素的遍歷與讀取相關(guān)技巧,需要的朋友可以參考下2016-03-03
實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例
下面小編就為大家分享一篇實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01
jquery 獲取 outerHtml 包含當(dāng)前節(jié)點(diǎn)本身的代碼
jQuery.html() 是獲取當(dāng)前節(jié)點(diǎn)下的html代碼，并不包含當(dāng)前節(jié)點(diǎn)本身的代碼，后來(lái)實(shí)驗(yàn)發(fā)現(xiàn)有一個(gè)jQuery的一個(gè)方法可以解決2014-10-10
jQuery實(shí)現(xiàn)table中兩列CheckBox只能選中一個(gè)的示例
下面小編就為大家?guī)?lái)一篇jQuery實(shí)現(xiàn)table中兩列CheckBox只能選中一個(gè)的示例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
jQuery模仿阿里云購(gòu)買服務(wù)器選擇購(gòu)買時(shí)間長(zhǎng)度的代碼
jQuery仿阿里云購(gòu)買服務(wù)器選擇時(shí)間長(zhǎng)度,操作簡(jiǎn)單，只需點(diǎn)擊所要選的時(shí)間段，對(duì)實(shí)現(xiàn)代碼感興趣的朋友參考下2016-04-04
實(shí)現(xiàn)placeholder效果的方案匯總
由于placeholder是html5的新屬性，可想而知，僅支持html5的瀏覽器才支持placeholder，目前最新的firefox、chrome、safari以及ie10都支持，ie6到ie9都不支持。2015-06-06
JQuery設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全)
這篇文章主要介紹了JQuery如何設(shè)置獲取下拉菜單某個(gè)選項(xiàng)的值(比較全),需要的朋友可以參考下2014-08-08