클라이언트 측의 자바스크립트,창조의 여러 가지 요소이고 각각 표시 asap

StackOverflow https://stackoverflow.com/questions/2408292

문제

클라이언트 측면 javascript 코드를 만들 중 일부 요소(에 대한 50-100)에서 사이클:

for (var i = 0; i < list.length; i++) {
   var obj = document.createElement("DIV");
   obj.innerHTML = "<span class=\"itemId\">" + list[i].Id 
                   + "</span><!-- some more simple code --> ";

   mainObj.appendChild(obj);
}

몇 가지 문제가 있으로 브라우저 렌더링을 수행합니다.예를 들어,IE 게임을 다운로드를 완료할 때까지 사이클,그리고 그 모든 요소에서 한다.는 방법이 있습을 보여 생성된 각각의 요소를 별도로 후 즉시 appendChild()?

도움이 되었습니까?

해결책

삽입하는 지연 사이에 추가 연속적인 항목으로, setTimeout(). 

function insertEntry(list, ix) {
    if (ix == null) {
        ix = 0;
    }
    else if (ix < list.length) {
        var elt= document.createElement("DIV");
        var attr = document.createAttribute('id');
        attr.value = 'item'+ix;
        elt.setAttributeNode(attr);
        elt.innerHTML = "<span class='itemCls'>" + list[ix].Id + ':&nbsp;' + list[ix].Name +
            "</span><!-- some more simple code -->\n";
        mainObj.appendChild(elt);
        ix++;
    }
    if (ix < list.length) {
        setTimeout(function(){insertEntry(list, ix);}, 20);
    }
}

작: 

    insertEntry(myList);

는 myList 는 다음과 같습니다: 

var myList = [
    { Id : '1938377', Name : 'Sven'},
    { Id : '1398737', Name : 'Walt'},
    { Id : '9137387', Name : 'Edie'}
    ...
 };

demo: http://jsbin.com/ehogo/4

다른 팁

이것은 하나의 스레드 자연의 브라우저입니다.렌더링을 시작하지 않을 때까지 스레드가 유휴 상태입니다.이 경우에는,그것의 경우 루프가 완료되고 기능을 종료됩니다.는 유일한 방법이(정의)시뮬레이션하는 여러 쓰레드를 사용하여 타이머,이렇게:

var timer,
    i = 0,
    max = list.length;

timer = window.setInterval(function ()
{
    if (i < max)
    {
        var obj = document.createElement("DIV");  
        obj.innerHTML = "<span class=\"itemId\">" + list[i].Id   
                + "</span><!-- some more simple code --> ";  

        mainObj.appendChild(obj);
        i++;
    }
    else
        window.clearInterval(timer);
}, 1);

분명한 결점이 걸릴 것입니다 루을 완료하는 데 시간이 더 오래기 때문에 그것은 피팅의 연출 inbetween 각 반복.

나는 월드 그것을 같이 사용하는 jQuery 대신:

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script>
        $(document).ready(function() {
            timer = window.setInterval(function ()
            {
                for (var i = 0; i < 100; i++) {
                    $('#container').append('<div>testing</div><br />');
                }
            },10);
        });
    </script>
</head>
<body>
<div id="container"></div>

</body>
</html>

jQuery 래서 그것은,신속하게 당신이 필요하지 않습니다 귀찮게 보여주는 정도로 만들어진,그러나 당신이 그것을 만들 수 있고 부드럽게 추가하여 타이머로 보여줍니다.

있는 특별한 이유가 당신이 원하는 DOM 한 후 업데이트 모든 사이클?그것은 것이 많이 더 빨리 만드는 경우는 모든 요소 중 하나에서 javascript 요소를 추가 이 하나의 요소 DOM 때 사이클이 완료됩니다.

var holder = document.createElement("DIV");
for (var i = 0; i < list.Length; i++) {
   var obj = document.createElement("DIV");
   obj.innerHTML = "<span class=\"itemId\">" + list[i].Id 
                   + "</span><!-- some more simple code --> ";

   holder.appendChild(obj);
}
mainObj.appendChild(holder);
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top