Javascript: как сделать простую задержку между выполнением кода javascript?

В таких ситуациях есть удобный трюк: используйте setTimeout с 0 миллисекундами. Это приведет к тому, что ваш JavaScript уступит место браузеру (чтобы он мог выполнять рендеринг, отвечать на ввод пользователя и т. Д.), Но не заставляя его ждать определенное время:

for (i=0;i<data.length;i++) {
    tmpContainer += '<div> '+data[i]+' </div>';
    if (i % 50 == 0 || i == data.length - 1) {
        (function (html) { // Create closure to preserve value of tmpContainer
            setTimeout(function () {
                // Add to document using html, rather than tmpContainer

            }, 0); // 0 milliseconds
        })(tmpContainer);

        tmpContainer = ""; // "flush" the buffer
    }
}

Примечание: T.J. Краудер правильно упоминает ниже, что приведенный выше код будет создавать ненужные функции на каждой итерации цикла (одна для установки закрытия, а другая в качестве аргумента для setTimeout). Вряд ли это будет проблемой, но при желании вы можете проверить его альтернативу, которая создает только функцию закрытия. однажды.

Предупреждение: несмотря на то, что приведенный выше код обеспечит более приятное впечатление от рендеринга, наличие 10000 тегов на странице не рекомендуется. После этого все остальные манипуляции с DOM будут происходить медленнее, потому что есть гораздо больше элементов, которые нужно пройти, и гораздо более затратный расчет перекомпоновки для любых изменений макета.

Вы можете использовать функцию window.setTimeout, чтобы отложить выполнение некоторого кода:

if(i % 50 == 0) {
    window.setTimeout(function() {
        // this will execute 1 second later
    }, 1000);
}

Но ваш javascript продолжит выполнение. Это не остановится.

Я бы разбил код, создающий divs, в функцию, а затем запланировал бы выполнение этой функции периодически через setTimeout, например:

function createThousands(data) {
    var index;

    index = 0;
    doAChunk();

    function doAChunk() {
        var counter;

        for (counter = 50; counter > 0; --counter) {
            // Are we done?
            if (index >= data.length) {
                // Yup
                return;
            }

            // ...create a div...

            // Move to the next
            ++index;
        }

        // Schedule the next pass
        setTimeout(doAChunk, 0); // 0 = defer to the browser but come back ASAP
    }
}

Для выполнения работы используется одно закрытие doAChunk. Это закрытие имеет право на сборку мусора после завершения своей работы. (Подробнее: Замыкания не сложны < / а>)

Живой пример

на это уходит много времени из-за переплавки. вы должны создать фрагмент документа, а затем добавить brats.

Когда происходит перекомпоновка в среде DOM?

Производительность Javascript - Dom Reflow - статья Google

сон не решит вашу проблему

с другой стороны, вы создаете строку, содержащую innerhtml и добавляемую в innerhtml. строковый материал действительно не требует большой производительности, но когда вы выполняете команду .innerhtml, он запускает процесс, который анализирует вашу строку, создает элементы и добавляет их. вы не можете прервать или добавить задержку.

процесс innerhtml нельзя приостановить или прервать.

вам нужно сгенерировать элементы один за другим, а после добавления 50 элементов создать задержку settimeout.

var frag = document.createDocumentFragment();

function addelements() {

   var e;
   for(i=0;i<50;++i) {
       e = document.createElement('div');
       frag.appendChild(e);
   }
   dest.appendChild(frag);
   window.setTimeout(addelements,1000);

}

Вот настоящий трюк, чтобы поставить задержку в javascript без зависания браузера. Вам нужно использовать функцию ajax с синхронным методом, который будет вызывать php-страницу, и на этой php-странице вы можете использовать php-функцию sleep ()! http://www.hklabs.org/articles/put-delay-in-javascript