在javascript中创建动态元素，并在创建节点后立即在UI上进行可视化

Create dynamic elements in javascript and visualize it on UI as soon as the node is created

本文关键字：创建 UI 可视化 节点 javascript 动态 元素      更新时间：2023-09-26

我正在编写一个创建树的脚本。我面临的问题是，当大量数据到来时，它会被卡住一段时间，然后在最后渲染所有东西。

我想知道的是，有没有一种方法可以让它更具互动性。就像一个节点被制作出来，它就会在界面上弹出。

为了进入内部，我发布了我的代码。

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);
    }

}

如果需要更清楚地理解问题，请随时询问更多细节。

@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);
}
相关文章：