我如何告诉 javascript 立即更新 DOM？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12022552/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I tell javascript to immediately update the DOM?
提问by John Hoffman
I am trying to load a 'loading' message to the user before a time-intensive function is called in javascript.
我试图在 JavaScript 中调用时间密集型函数之前向用户加载“正在加载”消息。
HTML:
HTML：
<p id='foo'>Foo</p>?
Javascript:
Javascript：
var foo = document.getElementById('foo');
function tellViewerLoading() {
// Tell the user that loading is occuring.
foo.innerHTML = 'loading...';
}
function someActionThatTakesALongTime() {
// Do some action that takes a long time.
var i = 0;
while(i < 100000) {i++; console.log(i);};
}
function domUpdateDelayExperiment() {
tellViewerLoading();
someActionThatTakesALongTime();
}
domUpdateDelayExperiment();
JSFiddle: http://jsfiddle.net/johnhoffman/xDRVF/
JSFiddle：http: //jsfiddle.net/johnhoffman/xDRVF/
What I want to happen is for the DOM to be updated immediately after tellViewerLoading()is called.
我想要发生的是在tellViewerLoading()调用后立即更新 DOM 。
Instead, what happens is that the DOM seems to be updated after someActionThatTakesALongTime()finishes running. At that point, it is useless to display a loading message.
相反，发生的情况是 DOM 似乎在someActionThatTakesALongTime()完成运行后被更新。那时，显示加载消息是没有用的。
How do I tell javascript to immediately update the DOM after tellViewerLoading()is called?
如何告诉 javascript 在tellViewerLoading()调用后立即更新 DOM ？
采纳答案by Claudix
Spawn the long-time running function with setTimeout:
使用 setTimeout 生成长时间运行的函数：
function domUpdateDelayExperiment() {
tellViewerLoading();
setTimeout(someActionThatTakesALongTime, 50);
}
Explanation: the tellViewerLoading()function updates the DOM but the browser won't reflect changes on screenuntil domUpdateDelayExperiment()returns. By delaying someActionThatTakesALongTimeby means of setTimeout() we let the browser to reflect DOM changes. The timeout is arbitrary, but its minimum value may be important in some browsers. A value of 50 ms is fair enough.
说明：该tellViewerLoading()函数更新 DOM，但浏览器在domUpdateDelayExperiment()返回之前不会在屏幕上反映更改。通过someActionThatTakesALongTimesetTimeout()延迟，我们让浏览器反映 DOM 更改。超时是任意的，但它的最小值在某些浏览器中可能很重要。50 毫秒的值就足够了。
回答by Florian Margaine
Actually, if you step through your code using a debugger, you will see that the loading text is changed before the next function is called.
实际上，如果您使用调试器单步调试代码，您将看到在调用下一个函数之前加载文本已更改。
Your browser is just hanging at the long function call, so it can't change the displayed text.
您的浏览器只是挂在长函数调用处，因此无法更改显示的文本。
Using a short timeout can help if you want your browser to have enough time to change the display before going to the next function.
如果您希望浏览器有足够的时间在转到下一个功能之前更改显示，则使用短超时会有所帮助。
