Вывод на печать Javascript по одному вместо целой страницы за раз?

Question

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

limits(){
    var a = 0;

    for (var i = 0; i < 1000; i++) {
        for (var ii = 0; ii < 1000; ii++) {
            document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
            a * 2;

        }
    }
}

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

Answer 1

Метод javascript window.requestAnimationFrame(callback) вызовет вашу функцию обратного вызова в следующем кадре анимации.Он обычно используется для анимации и, вероятно, будет хорошо работать для того, что вы делаете.

Чтобы изменить код для использования requestAnimationFrame, вы должны заставить свою функцию печатать небольшой фрагмент самостоятельно, сСсылка, чтобы знать, какой кусок для печати.Например, если вы сохранили содержимое страницы в массиве, это может быть только начальный индекс и длина.Так как вы печатаете увеличивающиеся степени 2, вы можете просто передать последнюю степень двух и количество строк, которые вы хотите напечатать для каждого запуска функции.

Вам также понадобится условие выхода- проверка в пределах limits, что если true, возвращается без запроса следующего кадра.Я просто жестко ограничил значение a, но вы также можете проверить, что индекс меньше длины массива (для моего массива содержимого страницы идея выше).

Поскольку requestAnimationFrame проходит вимя функции в качестве обратного вызова, в нее нельзя передавать аргументы.Следовательно, вы должны использовать bind для сортировки прикрепления значений к функции.Затем, внутри функции, вы можете получить к ним доступ, используя this.config - это просто объект для хранения начальных аргументов, которые вы хотите иметь для функции, а затем вы связываете ее, что позволяет вам обращаться к ним внутри функции с помощью this.numLines и this.a.

Тогда, когда вы запрашиваете следующий кадр, вы должны снова связать значения с limits.Если вы согласны с тем же аргументом, вы можете просто сделать limits.bind(this).Но если вы хотите изменить их, вы можете создать другой объект аналогично тому, как я написал config, и связать его вместо этого.

Следующий код, кажется, является базовым примером того, что выищу:

var foo = document.getElementById('foo');
var maxA = 1000000000000000000000000000000000;
function limits() {
    for(var i=0; i<this.numLines; ++i) {
        foo.innerHTML += "<p>" + this.a + "</p>";
        this.a *= 2;
        if(this.a > maxA) {
            return;
        }
    }
    requestAnimationFrame(limits.bind(this));
}

config = {
    numLines: 3,
    a: 1
};
requestAnimationFrame(limits.bind(config));

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

Answer 2

Вы можете сделать что-то вроде этого:

limits(){
    var a = 0;

    for (int i = 0; i < 1000; i++) {
        for (int ii = 0; ii < 1000; ii++) {
            setTimeout(function(){
               document.getElementById('foo').innerHTML += "<p>" + a + "</p>";
               a * 2;
            }, 0);

        }
    }
}

Вы можете отрегулировать время в setTimeout, но даже оставив его равным нулю, вы получите больше интерактивности даже во время построения страницы.Установка его на 10 или 100, конечно, значительно замедлит его, если хотите.