故事得從一個gif圖片開始。
接上篇文章,我的樹將會在使用者點擊樹上節點才非同步到一個伺服器頁面擷取子節點,並在頁面中將子節點加上。
在該方法開始時我將我的wait.gif圖片呈現出來,結果在頁面加節點的過程中,發現該gif動畫圖片不動了!!
跟了下時間,探索服務器處理請求並發回資料的時間是微秒層級的,不至於這麼慢呀,這是怎麼回事?
是前台載入出了問題嗎?前台添加子節點到樹上的操作我也是丟在非同步方法裡的,頁面不應該卡住啊。
作了下實驗,結果發現就算是將添加元素的操作放到非同步方法呼叫中,js的處理也是同步的!!所以這段時間會卡住。
解釋:
在用了ajax後,“ajax發送請求到伺服器頁,服務頁返回處理後的資料”該過程的確是非同步,但是在回到發送請求的頁面後所作的操作,如添加dom元素,或作些邏輯運算等等js代碼都是同步的。
請看測試代碼:
function test2()
{
//目標頁
var url = "ajaxtest.aspx";
//傳給目標頁的參數
var strParams = "testid=3";
var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
//load();
}
function load()
{
var html = "";
for(var i = 1;i <= 5000;i++)
{
html += i + ",";
}
span1.innerHTML += html + "<br>";
}
<span id="span1"></span>
<input type="button" id="btn" value="testGIF" onclick="test2()">
<img id="imgLoading" src="../images/wait.gif">
可以看到在js中:
用非同步:var loader1 = new net.ContentLoader(url,load,null,"GET",strParams);
或者是直接調load()
wait.gif圖片都會卡住,直到將span1.innerHTML處理完畢。
(PS:我的機子在i加到5000的時候已經有卡的效果了,你可以根據自己機子設定該值,直到卡為止,呵呵)
其實也就只有發送XMLHttp請求那裡有個參數用來設定是否非同步(req.open(method,url + "?" + params,true)),也就是說只有發送請求可以非同步,為什麼我會期望在回呼函數裡做的事情會是非同步呢?真不知道我是怎麼想的.
所以想讓IE不卡的辦法就只有加快這段載入節點的代碼,縮減它佔用資源的時間。
是的,那要怎麼辦呢?
在伺服器頁面產生html,然後直接將其值賦給樹的innerHtml是不是會更快呢?
可是怎麼產生html?看了dhtmlxtree產生樹的代碼,發現它每個節點都是動態加上去的。截出樹中畫一行的代碼看:
dhtmlXTreeObject.prototype._drawNewTr=function(htmlObject,node)
{
var tr =document.createElement('tr');
var td1=document.createElement('td');
var td2=document.createElement('td');
td1.appendChild(document.createTextNode(" "));
td2.colSpan=3;
td2.appendChild(htmlObject);
tr.appendChild(td1);tr.appendChild(td2);
return tr;
};
也就是說我得在伺服器頁中產生這樣的html(由前端頁面取出並賦給樹所在的div的innerHtml)。
還是留到以後吧……很頭疼拼標籤。
蟲子建議將樹這塊放到一個使用者控制項中,非同步載入這個使用者控制項,可是樹還得與右邊的ListBox互動呢。那就把整個dropDownList以下的部分全部放入使用者控制項,可是怎麼把已選的IDC資源綁定到這個使用者控制項裡的ListBox(傳參數可以解決),怎麼把選到ListBox中的值返回到頁面呢?也就是說在該選取器中點確定時怎麼擷取ListBox中的值