js 处理完成时的基本 Javascript 加载消息
我确信这个问题之前已经被问过 1000 次了，基本上我想做的就是更改页面元素的内容以在我的其他 javascript 代码（相当资源密集型）完成时显示加载消息。问题是该消息直到“其他 JS 处理”完成后才显示，从而完全违背了其目的。一个简化的例子...
<html>
<head>
<title> crappity crapness </title>
<script type="text/javascript">
function showMessage(){
document.getElementById("content").innerHTML = "please wait while we waste some time";
}
function wasteTime(){
//alert("oh joy");
pausecomp(3000);
//alert("marvelous!");
}
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
</script>
</head>
<body>
<div id="content">Blah</div>
<br/>
<a href="http://www.google.com" onclick="showMessage(); wasteTime();"> link </a>
</body>
如果我取消注释“oh Joy”警报，div 中的文本会立即更新。我如何让它在没有警报的情况下工作？
我知道我一定错过了一些简单的事情。 谢谢
Im sure this has been asked 1000 times before, basically all I want to do is change the content of an element of the page to display a loading message while my other javascript code (quite resource intensive) completes. The problem is the message isnt displayed untill after the "other JS processing" has completed, thus defeating its purpose entirely. a simplified example...
<html>
<head>
<title> crappity crapness </title>
<script type="text/javascript">
function showMessage(){
document.getElementById("content").innerHTML = "please wait while we waste some time";
}
function wasteTime(){
//alert("oh joy");
pausecomp(3000);
//alert("marvelous!");
}
function pausecomp(millis)
{
var date = new Date();
var curDate = null;
do { curDate = new Date(); }
while(curDate-date < millis);
}
</script>
</head>
<body>
<div id="content">Blah</div>
<br/>
<a href="http://www.google.com" onclick="showMessage(); wasteTime();"> link </a>
</body>
if I uncomment the "oh Joy" alert, the text in the div gets updated Immediatly. how do I make it work without the alert?
I know I must be missing something simple.
Thanks
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
听起来您遇到了这样一个事实：Javascript 是单线程的，但浏览器不是。
基本上，您不能同时运行多个 Javascript。然而，浏览器仍然需要执行 JavaScript 之外的事情，并且会在可能的情况下继续执行。问题在于，修改 DOM 是同步（即 JS 执行停止直到完成）还是异步（JS 继续执行）尚未定义。大多数浏览器都会选择后者。但是 JS 执行仍然具有相当高的优先级，并且许多 DOM 更新被推迟，直到 JS 执行必须停止并等待。警报框是一个很好的例子，因为它正在等待用户输入。
做你想做的事情的方法是利用
setTimeout()它让当前的 JS 完成，浏览器就可以完成 DOM 的更新，然后就可以执行等待运行的 JS超时。It sounds like you're coming up against the fact that Javascript is single-threaded, but browsers are not.
Basically, you can't have multiple pieces of Javascript running at once. However, the browser still has to do things outside of executing Javascript and proceeds to do so when it can. The problem is that whether modifying the DOM is synchronous (i.e. JS execution stops until it's done) or asynchronous (JS execution continues) isn't defined. Most browsers do the latter. But JS execution still has a quite high priority and a lot of DOM updates get deferred until the JS execution has to stop and wait. An alert box is an excellent example because it is waiting for user input.
The way to do what you want to do is to advantage of
setTimeout()which lets the current piece of JS finish, the browser can then finish updating the DOM, and then it can execute JS waiting to run on a timeout.如果可以异步调用
showMessage函数，那就太好了。在其他语言中，您可以使用线程来完成此操作，在 HTML5 中，您可以使用工作线程来完成此操作，这些工作线程正是为此类事情而设计的，但现在您可以最简单地使用setTimeout，这使得第一个参数中的代码在一段时间后执行，从而允许当前代码在它之前执行。更改
为
What would be nice if you could do would be to call the
showMessagefunction asynchronously. In other languages, you could do this with threads, and in HTML5 you can do this with workers, which are designed exactly for this sort of thing, but for right now you can most simply just usesetTimeout, which makes the code in the first argument execute after a certain amount of time, allowing the current code to execute before it does.Change
to
由于 while 循环，您的
pausecomp(3000)本质上阻止了浏览器重绘。我会做这样的事情：Your
pausecomp(3000)is essentially blocking the browser from redrawing because of the while loop. I would do something like this instead :