js阻塞ui程序涉及的知識點整理

2021-09-10 22:08:46 字數 1274 閱讀 4401

專案進行中遇到了同步ajax阻塞ui執行緒阻塞的問題,原因是執行兩個同步ajax請求為一次完整的方法,因業務需求需要迴圈執行這個方法,檢查後台返回的資料正確,但是由於ajax請求時間過長,考慮增加遮罩層與loading圖示,

這時遇到該問題,loading圖示 .後面的出圖也是所有方法執行後只出乙個圖

**類似於這樣:

$(function()

});var doajax =

});};

bajax : function()

});};

dohighcharts:function()

}

此時為每乙個過程考慮兩次js阻礙ui執行緒的載入,第一次新增遮罩層時,第二次為載入highcharts出圖時.

考慮兩次的原因均因為async:false的原因.由於瀏覽器的渲染(ui)與與js執行緒是互斥的,在執行js耗時操作時,頁面渲染會被阻塞掉。當我們執行非同步ajax的時候沒有問題,但當設定為同步請求時,其他的動作(ajax函式後面的**,還有渲染執行緒)都會停止下來。即使我的dom操作語句是在發起請求的前一句($('#mask').css('display','block');//遮罩層),這個同步請求也會「迅速」將ui執行緒阻塞,不給它執行的時間。這就是**失效的原因。

在**這個問題時,了解到更多的知識:(由於專案工期緊,沒能使用各種方法實現)

jquery的deferred物件

專案中的這個難題使用最簡單易懂的方式:

settimeout解決阻塞問題:

var flag =

$(function() 

});var doajax =

});};

bajax :

function()

doajax.dohightcharts();

if(flag.num==data.length)

}});

};dohighcharts:

function

()}

此時簡單來說,settimeout將方法排列的js執行佇列的最後(哪怕設定第二個引數為0),所以說使用settimeout是為了確保ui重新整理執行緒不被阻塞.

理解此過程可以根據:

js單執行緒**

js執行緒

在這裡進行簡單的總結:

1.

posted @

2017-02-21 10:48

edwinchan 閱讀(

...)

編輯收藏

js知識點整理 三

啥是閉包?閉包就是把某個變數或者函式給包裝起來 我們js當中會接觸很多的全域性變數,那如何保證我們的區域性變數在執行完函式之後還存在在我們的記憶體當中呢?就可以使用閉包 閉包總的來說是實現了作用域,使得程式能夠設計出更合理的,有層次的js 實現閉包的方式 function f1 nadd 沒有使用 ...

js知識點整理 五

建構函式和原型物件,以及例項之間的關係,建構函式和原型物件,建構函式有個屬性propertype指向原型物件 原型物件有個屬性constructor指向了建構函式 建構函式和原型函式都是唯一的 例項是不唯一的,例項的方法可以從建構函式裡面查詢,找不到就去原型裡面找。原型和構造方法都是唯一的,但是在例...

有用的知識點整理

時間的相互轉化 from dateutil.relativedelta import relativedelta from datetime import import time t int str date.today split 1 3 現在的日期與3月相差幾個月 today date.toda...