如何在java脚本中的大型进程继续后台（如for循环）时呈现HTML页面 [英] How to render the HTML page when large process continue in background(like for loop) in java script

问题描述

如何在从大型pdf文件中读取数据时显示div中的逐行数据？



我创建了一个导入大型pdf文件和附加行的应用程序通过div中的行，但是应用程序在for循环的整个过程之后显示所有行。



但是我希望在div中逐行显示而不是整个过程的整个行。



我尝试了什么：



不同的javascript coading.We have上传pdf文件并在html文件中转换然后将行追加到div。

How to show line by line data in div when reading the data from large pdf file?

I have created an application where import large pdf file and append line by line in div but application displays all lines after whole process of for loop.

But I want line by line display in div instead of whole at last of the process.

What I have tried:

Different javascript coading.We have uploading the pdf file and converting in html file then append line to div.

推荐答案

唯一的方法是使用客户端编码，因为你的所有服务器边代码将执行，然后HTML将被发送到客户端。



您必须使用Web服务并一直反复调用它直到您拥有所有内容。

The only way to do that is to use client-side coding because all of your server side code will execute and then the HTML will be sent to the client.

You would have to use a web service and keep calling it over and over until you have everything.

（我假设您在客户端上执行此操作，而不是服务器。否则，请参阅解决方案＃1 。）



Javascript是一种单线程语言。如果您对DOM进行了更改，则在代码完成并将控制权交还给浏览器之前，它们将不可见。



取决于您需要支持哪些浏览器 [ ^ ]，您可以重写代码以使用Web Workers： Web Workers API - Web API | MDN [ ^ ]



这会将工作推送到后台线程，但您的代码将无法再更新DOM。相反，它需要将消息发布到主线程。然后你将处理 onmessage 事件来读取数据行并更新DOM。



我相信这个是 PDF.js 使用的方法[ ^ ]，这是Firefox使用的PDF渲染引擎。



或者，你需要重写你的代码，以便你可以完成工作的一部分，然后将其余的工作作为延续注册并传递给 setTimeout ：

(I'm assuming you're doing this on the client, and not the server. Otherwise, see solution #1.)

Javascript is a single-threaded language. If you make changes to the DOM, they will not be visible until your code has finished and yielded control back to the browser.

Depending on which browsers you need to support[^], you might be able to rewrite your code to use Web Workers: Web Workers API - Web APIs | MDN[^]

This would push the work onto a background thread, but your code would no longer be able to update the DOM. Instead, it would need to post a message to the main thread. You would then handle the onmessage event to read the line of data and update the DOM.

I believe this is the approach used by PDF.js[^], which is the PDF rendering engine used by Firefox.

Alternatively, you'll need to rewrite your code so that you can do one part of the work, and then sign up the rest of the work as a continuation and pass it to setTimeout:

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

setTimeout（...，0）调用将产生控制权回到浏览器足够长的时间以显示DOM更新，然后立即触发回调。



但是，如评论中所述，我们可以帮助你修复我们看不到的代码。如果您需要更具体的帮助，那么您需要与我们分享您的代码的相关部分。

The setTimeout(..., 0) call will yield control back to the browser for long enough for the DOM updates to be shown, and then the callback will be triggered immediately.

But, as mentioned in the comments, we can't help you fix code that we can't see. If you need more specific help, then you're going to need to share the relevant parts of your code with us.

这篇关于如何在java脚本中的大型进程继续后台（如for循环）时呈现HTML页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！