jQuery中的ajax async同步和異步詳解
項目中有這樣一個需求,使用ajax加載數(shù)據(jù)返回頁面并賦值,然后前端取出該值
這其中涉及到代碼的順序問題,有時后臺還未返回數(shù)據(jù),但已執(zhí)行后面代碼,
所以就會造成取不到值
$.ajax({ type: "post", url: "admin/PfmOptionRuleItem.do", success: function(data){ $("#ruleItem").val(data.ruleItem); //① } }); return $("#ruleItem").val(); //②
如果①還未從后臺返回數(shù)據(jù) 此時執(zhí)行②就獲取不到值
Ajax的第一個字母是asynchronous的開頭字母,這意味著所有的操作都是并行的,完成的順序沒有前后關(guān)系。
$.ajax()的async參數(shù)總是設(shè)置成true,這標(biāo)志著在請求開始后,其他代碼依然能夠執(zhí)行。
如果把這個選項設(shè)置成false,這意味著所有的請求都不再是異步的了,這也會導(dǎo)致瀏覽器被鎖死。
雖然官方不建議這么干,只是不能用太多,否則會造成用戶體驗不佳
舉個栗子
alert("setp 1"); $.ajax({ url: "admin/PfmOptionRuleItem.do", async: false, success: function(data){ alert("hello ajax"); //① } }); alert("setp 2"); //②
當(dāng)把asyn設(shè)為false時,這時ajax的請求時同步的,也就是說,這個時候ajax塊發(fā)出請求后,
他會等待在①這個地方,不會去向下執(zhí)行②,直到①執(zhí)行完畢
此時依次執(zhí)行順序為
setp 1
hello ajax
setp 2
如果async為true 則執(zhí)行順序為
setp 1
setp 2
hello ajax
關(guān)于本文給大家敘述的jQuery中的ajax async同步和異步,全部介紹完了,希望對大家有所幫助。
相關(guān)文章
jQuery操作DOM_動力節(jié)點Java學(xué)院整理
這篇文章主要介紹了jQuery操作DOM,下面的DOM操作將圍繞上面的DOM樹進(jìn)行學(xué)習(xí)JQueryDOM操作,有興趣的可以了解一下2017-07-07jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果【附demo源碼下載】
這篇文章主要介紹了jQuery插件FusionCharts實現(xiàn)的2D餅狀圖效果,結(jié)合完整實例形式分析了FusionCharts插件2D餅狀圖繪制相關(guān)實現(xiàn)技巧,并附帶demo源碼供讀者下載參考,需要的朋友可以參考下2017-03-03如何確保JavaScript的執(zhí)行順序 之jQuery.html深度分析
在上一篇文章《如何確保JavaScript的執(zhí)行順序 - 之實戰(zhàn)篇》中,我們發(fā)現(xiàn)jQuery的html函數(shù)能夠確保動態(tài)加載的JavaScript按照引入順序執(zhí)行。2011-03-03關(guān)于jQuery中的each方法(jQuery到底干了什么)
這篇文章主要介紹了關(guān)于jQuery中的each方法,需要的朋友可以參考下2014-03-03jquery清空textarea等輸入框?qū)崿F(xiàn)代碼
jquery清空textarea等輸入框在工作中很常見,接下來的代碼簡單實用,感興趣的朋友可以參考下哈,希望對你有所幫助2013-04-04jQuery獲取頁面及個元素高度、寬度的總結(jié)——超實用
這篇文章主要介紹了jQuery獲取頁面及個元素高度、寬度的總結(jié)——超實用,需要的朋友可以參考下2015-07-07