AJAX 同步请求导致的UI阻塞问题
遇到的一個問題,大概是這樣的。。。
前端頁面上有一個列表,遍歷列表按照并發度執行ajax操作,需要等上一個并發度執行返回結果后才能決定是否進行下一個并發度的執行。
1、一開始的想法是,寫一個ajax執行函數,傳入每次執行的并發度,用for循環遍歷列表,執行這個函數。比如有8個IP,然后并發度2,就for循環,執行4次的這個函數。但是,這樣是不行的,因為ajax默認情況下是異步多線程的的,也就是說,我在執行第一個并發度的IP時候,它并不會等待后端的接口返回執行的結果再往下,而是會再開一個線程,執行下一個并發度的IP,這樣就違背了我需要等待上一個并發度執行結果才能再繼續往下執行的要求。
2、然后,第二個想法是,既然ajax是異步的,那我用async : false把它改成同步的不就好了,然后,這就導致了標題所示的問題,雖然這樣就可以按照順序來執行了,等上一個ajax請求返回結果后才執行下一個請求,但是,因為單線程的原因,導致ajax返回結果后前端UI的變化無法馬上執行,而是直接執行下一個ajax了,也就是UI阻塞,知道ajax都執行完了才執行UI的變化,這樣對用戶很不友好,得等全部都執行完了才能看到變化,像個憨批。
查了下,如果想同步又執行UI的話,需要為AJAX請求寫回調函數,就是接收到后端返回的結果后會執行的操作。因為一些原因這種方法在我的具體場景了好像也不行,就不研究了。
總是,ajax最好還是別設成同步的了,單線程不知道會出現什么問題,還是盡量在代碼邏輯上支持異步的情況。
3、最好的解決方法是將執行的ajax函數改成遞歸的,也就是套娃hhh,全局設置一個flags標識,只有標識為True的時候才繼續執行下去,而標識為False的時候則停止執行,在遇到終止條件是就把標識設為Flase(具體情況具體分析),并且需要寫在ajax的sucess代碼段,這樣等待上一個請求成功返回執行結果才會進行判斷是否往下執行下一個請求,這樣就避免了第一種情況。
總結
以上是生活随笔為你收集整理的AJAX 同步请求导致的UI阻塞问题的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 【玩转yolov5】使用TensorRT
- 下一篇: Android手机吞吐率测试方法记录