ajax請求與UI程序阻塞

2021-08-03 03:41:11 字數 566 閱讀 6514

**:

在與後台實現資料互動時經常會遇到一種這樣的情況:

1.需要用乙個ajax請求後台資料,並且要在獲取到資料之後再渲染到頁面,這個時候就必須用同步(async:false)。

2.然而在這個時候就會有另一種情況,當ajax的請求花費的時間比較長的時候需要乙個loading層來顯示等待狀態

3.這個時候beforesend是沒有效果的,即使把loading的**寫在ajax之前也不行。

4.原因就是ajax的async設定為false時瀏覽器的渲染(ui)執行緒和js執行緒是互斥的,在執行js耗時操作時,頁面渲染會被阻塞掉。當我們執行非同步ajax的時候沒有問題,但當設定為同步請求時,其他的動作(ajax函式後面的**,還有渲染執行緒)都會停止下來。即使我的dom操作語句是在發起請求的前一句,這個同步請求也會「迅速」將ui執行緒阻塞,不給它執行的時間。這就是**失效的原因。

5.解決方法(注意:是在非同步下實現的):如圖

程序與執行緒 阻塞與非阻塞

程序 cpu執行任務的模組。執行緒 模組中的最小單元。cpu比作我們每個人,到飯點吃飯了。可以點很多菜 cpu中的程序 宮保雞丁,魚香肉絲,酸辣土豆絲。每樣菜具體包含了哪些內容 cpu每個程序中的執行緒 宮保雞丁 詳情 黃瓜 胡蘿蔔 雞肉 花生公尺 而詳情構成了宮保雞丁這道菜,吃了以後不餓。就可以幹...

ajax同步請求與非同步請求

在前後臺請求資料互動的時候,我們經常用到ajax來進行資料的請求與返回,ajax請求的async欄位是boolean型別,用來標識ajax請求是同步請求或者非同步請求。async預設為true,非同步請求。兩者的區別如下 非同步請求 非同步請求的好處是 不用等待ajax返回資料結果,就繼續往下執行,...

ajax同步請求與非同步請求

在前後臺請求資料互動的時候,我們經常用到ajax來進行資料的請求與返回,ajax請求的async欄位是boolean型別,用來標識ajax請求是同步請求或者非同步請求。async預設為true,非同步請求。兩者的區別如下 非同步請求 非同步請求的好處是 不用等待ajax返回資料結果,就繼續往下執行,...