如何在我的脚本执行重型处理时强制浏览器重绘？ [英] How can I force the browser to redraw while my script is doing some heavy processing?

问题描述

我使用 innerHTML 属性动态修改 DIV ，以报告需要几个秒完成。问题是在Firefox上，页面实际上并没有被重新渲染以反映这种改变，直到脚本完成之后。这使得应用程序感觉迟缓。有没有办法确保对HTML的更改立即显示，即使更多的脚本正在运行？

I am using the innerHTML property to modify a DIV dynamically, to report on a process that takes a few seconds to finish. The problem is that on Firefox the page is not actually re-rendered to reflect that change until after the script has finished. This makes the app feel sluggish. Is there a way to make sure that changes to the HTML show up immediately, even if more scripts are running?

推荐答案

浏览器是单线程的。当脚本运行时，浏览器不能做任何其他事情。如果您想要执行类似进度表的操作，则必须使用 setTimeout（） 或 setInterval（） ，并将任务分解成在一个时间间隔上运行的更小的块。这会在脚本运行之间留下空白，将控制权返回浏览器，浏览器可以重新绘制。

The browser is single threaded. While the script is running, the browser can't do anything else. If you want to do something like a progress meter, you have to use setTimeout(), or setInterval(), and break your task down into smaller chunks that get run on an interval. This leaves gaps in between the script runs, giving control back to the browser, where the browser can redraw.

这篇关于如何在我的脚本执行重型处理时强制浏览器重绘？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！