在寫(xiě)一個(gè)項(xiàng)目時(shí)遇到一個(gè)問(wèn)題。
問(wèn)題是這樣的担映，點(diǎn)擊切換到A TAB頁(yè)時(shí)，需要通過(guò)ajax加載數(shù)據(jù)叫潦，然后用highchart圖表進(jìn)行顯示。由于數(shù)據(jù)加載較多官硝，要等待上幾秒矗蕊，所以打算加個(gè)loading的樣式，使用戶(hù)體驗(yàn)良好氢架。
使用了模態(tài)框的形式傻咖，載入一張loading的gif圖片。
$(".tab").click(function(){
? ? $("loadingModal").modal("show");
? ? 執(zhí)行ajax1岖研；
? ? 執(zhí)行ajax2卿操；
})
本來(lái)以為按照預(yù)想的顯示，但是實(shí)際上孙援，只在ajax2請(qǐng)求完之后才短暫地顯示了模態(tài)框害淤。
后來(lái)查資料后，才發(fā)現(xiàn)其中的問(wèn)題拓售，
由于設(shè)計(jì)需要窥摄，兩個(gè)ajax請(qǐng)求都設(shè)為同步。
即础淤，async:false;(true的話(huà)即為異步)
如果ajax請(qǐng)求設(shè)為同步崭放，則在發(fā)送ajax請(qǐng)求后哨苛，頁(yè)面會(huì)出現(xiàn)假死，無(wú)法與用戶(hù)交互币砂，直到ajax請(qǐng)求完畢后網(wǎng)頁(yè)才會(huì)恢復(fù)建峭。也就是問(wèn)題中，為什么等到ajax2執(zhí)行完畢之后决摧，我的模態(tài)框才彈出loading樣式亿蒸。
如果async:true，則為異步請(qǐng)求蜜徽。發(fā)送ajax后祝懂，不用等待請(qǐng)求完畢，便可繼續(xù)執(zhí)行以下的操作拘鞋。
由于設(shè)計(jì)需要砚蓬，ajax必須為同步，但是如何在同步狀態(tài)下顯示loading字樣盆色，還需要繼續(xù)想辦法
后來(lái)為了完成該需求還是做了一些解決方法灰蛙。
查資料后發(fā)現(xiàn)，當(dāng)我們ajax請(qǐng)求設(shè)置為同步的時(shí)候隔躲，UI繪制線程會(huì)被掛起摩梧，主線程用于通過(guò)ajax讀取數(shù)據(jù)。知道ajax返回?cái)?shù)據(jù)后UI線程才能恢復(fù)工作狀態(tài)宣旱。
我的解決方法還是繞不過(guò)這個(gè)點(diǎn)仅父。只能變通，需要互相依賴(lài)的ajax就讓他們先后執(zhí)行浑吟。比如笙纤，Bajax需要從Aajax中獲得數(shù)據(jù)再請(qǐng)求，那么就將Bajax的執(zhí)行放在Aajax的success函數(shù)中组力。
雖然實(shí)際上沒(méi)有解決ui線程與主線程的問(wèn)題省容，但在一定程度上還是繞過(guò)了這個(gè)坑。至于這個(gè)怎么解決燎字，等待再次查資料
