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

Question

У меня есть цикл for, который повторяет более 10000 раз в коде JavaScript.Цикл for создает и добавляет теги

в поле текущей страницы DOM.

for(i = 0; i < data.length; i++)
{
    tmpContainer += '<div> '+data[i]+' </div>';
    if(i % 50 == 0) { /* some delay function */ }
}
containerObj.innerHTML = tmpContainer;

я хочу ставить задержку после каждых 50 тегов

, так что будет кодом в месте

/* some delay function */

, потому что это загружает все время10000 тегов

.я хочу обновить коробку кусками по 50 тегов

.

заранее спасибо.

Answer 1

В таких ситуациях есть удобный трюк: используйте 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
    }
}

Примечание : TJ Crowder правильно упоминает ниже, что приведенный выше код будет создавать ненужные функции на каждой итерации цикла (одна для настройки закрытия, а другая в качестве аргумента для setTimeout).Это вряд ли проблема, но если вы хотите, вы можете проверить его альтернативу , которая создает функцию закрытия только один раз.

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

Answer 2

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

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

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

Answer 3

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

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

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

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

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

процесс innerhtml не может быть приостановлен или прерван.

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

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

}

Answer 4

Я бы разбил код, создающий div s на функцию, и затем планировал бы выполнение этой функции периодически через 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 чтобы сделать работу.Это закрытие подходит для сбора мусора, как только его работа завершена.(Подробнее: Затворы не сложны )

Живой пример

Answer 5

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