2012-03-13 36 views
0

我正在創建樹的腳本。我面臨的問題是,當大量數據出現時,它會卡住一段時間,然後渲染每一個東西。在javascript中創建動態元素,並在創建節點後立即在UI上將其可視化

我在找什麼可以有一種方式,使其更具互動性。就像一旦一個節點被創建,它就會在界面上彈出。

爲了進入裏面我張貼我的代碼。使用

function recursiveGenerateTree(objNode, parntSpan, ulContainer, objEditParam) { 
    var cntLi = 0; 
    var spnApplyClass; 
    var rdbValue; 
    var cntrList = 0; 

    for (cntLi = 0; cntLi <= objNode.NodeList.length - 1; cntLi++) { 

      objEditParam.rdbGroup = objEditParam.rdbGroup; 
      rdbValue = objEditParam.orgRootID + '_' + objNode.NodeList[cntLi].Id; 
      objEditParam.rdbValue = rdbValue; 
      objEditParam.selector = 'radio'; 
      objEditParam.selector = ''; 

     objEditParam.isNewNode = false; 
     addChild('', parntSpan, ulContainer, objEditParam); 

     $('#txtParent').val(objNode.NodeList[cntLi].Name); 
     spnApplyClass = $('#txtParent').parents('span:first'); 
     $('#txtParent').trigger('blur', [spnApplyClass]); 
     spnApplyClass.removeClass('bgLime'); 

     var li = spnApplyClass.parents("li:first"); 
     li.attr("nodeId", objNode.NodeList[cntLi].Id); 
     li.attr("rootnodeId", objNode.NodeList[cntLi].RootOrgUnitId); 

     var ulPrsnt = objNode.NodeList[cntLi].NodeList; 
     if (ulPrsnt != undefined && ulPrsnt.length > 0) { 
      recursiveGenerateTree(objNode.NodeList[cntLi], spnApplyClass, '', objEditParam); 
     } 
    } 

} 

第二個功能是添加子

function addChild(currentbtn, parentSpn, parentUl, objEditParam) { 
    var spnElement; 
    if ($(currentbtn).length > 0) { 
     var dvClick = $(currentbtn).closest('div').siblings('div.OrgGroupLists') 
     spnElement = $(dvClick).find('span.bgLime'); 
    } 
    else { 
     spnElement = parentSpn; 
    } 
    if (spnElement.length == 0 && parentUl.length == 0) 
     return; 

    var crtUlChild; 
    if (spnElement.length > 0) { 
     var dvCurrent = $(spnElement).closest("div"); 
     crtUlChild = $(dvCurrent).find('ul:first'); 
    } 

    if (parentUl.length > 0) { 
     crtUlChild = parentUl; 
    } 

    if (crtUlChild.length == 0) { 
     var ulChildrens = createUl(); 
    } 
    //Next line needs to be updated. 
    var spnImage = $(dvCurrent).find("span:first"); 
    $(spnImage).removeClass("SpanSpace"); 
    $(spnImage).addClass("L7CollapseTree"); 
    var liChildrens = document.createElement("li"); 
    $(liChildrens).attr("isNew", objEditParam.isNewNode); 
    $(liChildrens).attr("isTextEdited", false); 
    var dvChildrens = createDivNode(objEditParam); 
    $(liChildrens).append(dvChildrens); 
    if (crtUlChild.length == 0) { 
     $(ulChildrens).append(liChildrens); 
     $(dvCurrent).append(ulChildrens); 
    } 
    else { 
     crtUlChild.append(liChildrens); 
    } 



} 

如果需要更清楚地瞭解這個問題隨意問任何更多的細節。

+0

瀏覽器使用相同的線程JavaScript作爲渲染,讓所有的代碼的網頁刷新之前將執行您需要進行遞歸調用。你可以重構你的循環來使用'setTimeout()',這樣可以讓瀏覽器在每次迭代之間刷新。 – nnnnnn 2012-03-13 11:26:17

+0

是的,我厭倦了這一點,但它並沒有改變瀏覽器行爲中的任何事情。 – ankur 2012-03-13 11:33:50

+0

這個東西在FF中完美的工作,但IE瀏覽器搞砸了。 – ankur 2012-03-13 11:45:18

回答

0

@nnnnnn表示您在setTimeout中調用後續遞歸。 我沒有花時間嘗試在本地複製代碼。例如,查看下面的JavaScript代碼。 setTimeout適用於下面的代碼。您可以根據瀏覽器改變變量j的長度。內部循環j是阻止JS線程。

<html><head> 
    <script> 
    var k = 0; 
    function recursiveTree(){ 
    $("#holder").append("<div>Item</div>"); 
    for(var j =0; j < 100000000; j++){ 
     // blocking thread 
    } 
    if (k++ < 20) { 
     console.log(k); 
     setTimeout(function(){recursiveTree()},10); 
    } 
    }</script> 
</head> 
<body> 
<div id='holder'></div></body> 
</html> 

我假定您使用的是JQuery。

只是爲了確認如下

if (ulPrsnt != undefined && ulPrsnt.length > 0) { 
    setTimeout(function(){recursiveGenerateTree(objNode.NodeList[cntLi], spnApplyClass, '', objEditParam);},10); 
} 
+0

我試過這樣做。 setTimeout(function(){recursiveGenerateTree(objNode.NodeList [cntLi],spnApplyClass,'',objEditParam)},100);;它沒有按預期產生結果。 – ankur 2012-03-13 13:23:00

+0

檢查更新的答案。如果(ulPrsnt!= undefined && ulPrsnt.length> 0)setTimeout(function(){recursiveGenerateTree(objNode.NodeList [cntLi],spnApplyClass,'',objEditParam)確認您需要進行遞歸調用,如下所示 ;},10); } – ch4nd4n 2012-03-13 13:46:26

+0

是的,是這樣,所以任何出路。 – ankur 2012-03-14 08:55:33