Member 12889337 Ответов: 2

Как визуализировать HTML-страницу, когда большой процесс продолжается в фоновом режиме( например, цикл for) в java script

Как показать построчные данные в div при чтении данных из большого pdf-файла?

Я создал приложение, в котором импортирую большой pdf-файл и добавляю строку за строкой в div, но приложение отображает все строки после всего процесса цикла for.

Но я хочу, чтобы строка за строкой отображалась в div, а не вся, наконец, часть процесса.

Что я уже пробовал:

Различное кодирование javascript.У нас есть загрузка pdf-файла и преобразование в html-файл, а затем добавление строки в div.

F-ES Sitecore

Мы не можем сказать вам, как исправить код, который мы не видим. Опубликуйте соответствующие биты кода, которые у вас есть.

2 Ответов

Рейтинг:
2

ZurdoDev

Единственный способ сделать это-использовать клиентское кодирование, потому что весь ваш серверный код будет выполнен, а затем HTML-код будет отправлен клиенту.

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

Рейтинг:
0

Richard Deeming

(Я предполагаю, что вы делаете это на клиенте, а не на сервере. В противном случае см. Решение № 1.)

Javascript-это однопоточный язык. Если вы внесете изменения в DOM, они не будут видны до тех пор, пока ваш код не завершится и не вернет управление браузеру.

В зависимости от какие браузеры вам нужно поддерживать[^], вы могли бы переписать свой код, чтобы использовать веб-работников: Web Workers API-веб-API | MDN[^]

Это подтолкнет работу к фоновому потоку, но ваш код больше не сможет обновлять DOM. Вместо этого ему нужно было бы отправить сообщение в основной поток. Тогда вы бы справились с onmessage событие для чтения строки данных и обновления DOM.

Я считаю, что именно такой подход используется PDF.js[^], который является движком рендеринга PDF, используемым Firefox.

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

(function(){
    var index = 0;
    
    var doNextChunk = function(){
        document.getElementById("status").innerText = index;
        index++;
        
        if (index < 1000) {
            setTimeout(doNextChunk, 0);
        }
    };
    
    doNextChunk();
})();

То setTimeout(..., 0) вызов вернет управление браузеру на достаточно долгое время, чтобы показать обновления DOM, а затем обратный вызов будет запущен немедленно.

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