js处理完成时的基本的Javascript加载消息

我确定这已被问了1000次之前，基本上我想要做的就是改变页面元素的内容来显示加载消息，而我的其他JavaScript代码（相当资源密集）完成。问题是消息在“其他JS处理”完成后不显示，直到完全失败。一个简单的例子...js处理完成时的基本的Javascript加载消息

<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>

如果我去掉了“哦喜悦”的警报，在div文本被立刻更新。如何在没有警报的情况下使其工作？

我知道我必须缺少一些简单的东西。谢谢

来源

2011-03-31 hendinas

这听起来像你来面对一个事实，即JavaScript是单线程的，但浏览器都没有。

基本上，你不能同时运行多个Javascript块。但是，浏览器仍然需要在执行Javascript之外执行任何操作，并在可能的情况下继续执行此操作。问题是，是否修改DOM是同步的（即JS执行停止，直到完成）或异步（JS执行继续）未定义。大多数浏览器都使用后者。但是JS执行仍然具有相当高的优先级，并且很多DOM更新都会被延迟，直到JS执行必须停止并等待。警告框是一个很好的例子，因为它正在等待用户输入。

做你想做的事的方法是利用setTimeout()它可以让目前的一块JS完成的，浏览器则可以完成更新DOM，然后它可以执行JS等待一个超时运行。

来源

2011-03-31 03:40:52 staticsan

很好的解释，感谢您的。我希望能够在不使用setTimeout的情况下做到这一点（因为它在表单的onSubmit中进行了验证），但似乎没有其他办法。无论如何，我想延迟一毫秒不是太糟糕！ – hendinas 2011-03-31 07:18:25

您的pausecomp(3000)实质上阻止浏览器因为while循环而导致重绘。我会做这样的事情，而不是：

function wasteTime(){ 
    setTimeout(runNext, 3000); 
} 

function runNext(){ 
    alert("marvelous!"); 
}

来源

2011-03-31 03:38:36 climbage

如果你可以做的事情会是什么将是异步调用showMessage函数。在其他语言中，您可以使用线程来完成此任务，而在HTML5中，您可以使用专为这类事情设计的工作程序来完成此操作，但现在您可以最简单地使用setTimeout，这会使代码处于第一个参数在一段时间后执行，允许当前代码在执行之前执行。

变化

onclick="showMessage(); wasteTime();"

到

onclick="showMessage; setTimeout(wasteTime,5);">

来源

2011-03-31 03:41:58

是的，就是这样。我试图在没有setTimeout的情况下做到这一点，但是我认为它不会太糟糕，如果它只能延迟一毫秒！谢谢。 – hendinas 2011-03-31 06:41:26

js处理完成时的基本的Javascript加载消息

回答

相关问题