Question

我有一个沉重的JavaScript工作，阻止我向用户显示进度。有没有办法强制刷新窗口？

＆＃13;

$("button").click(function() 

{
 var date = new Date();
 for (var i = 0; i< 238801000000000000; i++) {
		if (new Date() - date > 5000) {
			document.getElementById('iddds').innerHTML = 'FINISH';
			return;
		}
		if ((i % 10000) == 0) {
			var el = document.getElementById('iddds');
			el.innerHTML = i;
			redraw(el, document.getElementById('parent'));
			
			console.log(i);
		}
	}
});

function redraw(element, e3lement) {
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<div id='parent'>
	<span id='iddds'>Hello world!!!!!!!!!!!!!</span>
</div>

<button>START</button>
</html>

＆＃13;

我已经尝试了这里给出的所有答案：How can I force WebKit to redraw/repaint to propagate style changes?和Force DOM redraw/refresh on Chrome/Mac - 这些都没有用，所以我认为这是不可能的，但考虑到有很多人谁知道答案我认为我做错了什么？

我的繁重工作是DOM操作 - Web Workers不会在这里工作。
我可以尝试用setTimeout或类似的东西来分割工作，但我真的不想延迟工作或者只是为了能够显示进度而让它变慢。

Answer 1

有没有办法强制刷新窗口？

在主UI线程上的单个长时间运行for循环期间？不，没有。

相反，您的选择是：

将长时间运行的进程从主UI线程移到web worker;让该工作者将更新发布到它在DOM中呈现的主线程。
将其分解为较小的部分，并在每个部分之后使用setTimeout来安排下一部分，以便浏览器有机会刷新。用户界面将在每个部分中保持阻止状态，但可以在它们之间进行更新。请注意，这可以使该过程实时延长批次;如果可能的话，网络工作者就是最佳选择。

（最好避免在一开始只做一次时重复getElementById，并重复使用你得到的参考。）

Answer 2

尝试将您的脚本添加到其他文件中，然后使用以下内容将其包含在您的文件中。

<script async src="{{url}}" type="text/javascript"></script>

在繁重的javascript工作期间刷新窗口

2 个答案: