Internet Explorer不按顺序执行Javascript

Question

I'm developing a web app that needs to do some backend processing while still displaying the information on screen. 我正在开发一个Web应用程序，需要进行一些后端处理，同时仍然在屏幕上显示信息。 Obviously this is best suited for AJAX, which I'm using. 显然这最适合我正在使用的AJAX。 However, prior to beginning the AJAX request, I'm making a few visual changes via Javascript. 但是，在开始AJAX请求之前，我正在通过Javascript进行一些视觉上的更改。 Specifically: 特别：

document.getElementById('calc').innerHTML = 'Calculating...'; document.getElementById('calc').disabled = true;

I then go on to call a servlet via AJAX. 然后我继续通过AJAX调用servlet。

This works fine in Firefox. 这在Firefox中运行良好。 However in Internet Explorer (version 8), the visual changes never take effect. 但是在Internet Explorer（版本8）中，视觉更改永远不会生效。 The app just sits there for a minute or two until the AJAX processing is done. 应用程序只是坐在那里一两分钟，直到AJAX处理完成。 It seems like the AJAX code is executing before the page changes, but I don't know why that would be. 似乎AJAX代码在页面更改之前执行，但我不知道为什么会这样。

Any assistance would be greatly appreciated. 任何帮助将不胜感激。

EDIT: Here's my best effort at a Short, Self Contained, Correct, Example 编辑：这是我在短暂的，自包含的，正确的，例子中的最大努力

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Cache-Control" content="no-cache">
<script>
var inEdit = 0;
var calcCurrent = false; 
function recalc() {
var xmlhttp=new XMLHttpRequest();
if (xmlhttp==null)
{
  var tmp = "Your browser does not support XML! ";
  tmp += "Please contact your Technical Support division for information on how to upgrade.";
  alert(tmp);
}
else
{
  document.getElementById('calc').innerHTML = 'Calculating...';
  document.getElementById('calc').disabled = true;
  var url = "http://www.nzherald.co.nz/";
  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);
  if (xmlhttp.responseText.indexOf("Success")>=0) {
    alert(xmlhttp.responseText);
  }
  else
    alert(xmlhttp.responseText);
  document.getElementById('calc').value = 'Recalculate';
  document.getElementById('calc').disabled = false;
}
}
</script>
</head>
<body>
<a id='calc' class='Button' href="javascript:recalc()" >Recalculate</a>
</body>
</html>

The only issue example with this is that this URL returns almost instantly. 这个唯一的问题是这个URL几乎立即返回。 On my app it's pointing to a page that does database processing for about a minute, and so the problem is a lot more obvious. 在我的应用程序上，它指向一个数据库处理大约一分钟的页面，因此问题更加明显。

Answer 1

Those two lines of code are very straightforward. 这两行代码非常简单。 The are two things that comes to mind: 有两件事情浮现在脑海中：

Do you have the ID defined for another element. 您是否为其他元素定义了ID。 Can you double check that calc is not used anywhere else in the page? 你能仔细检查一下在页面的其他地方没有使用calc吗？ Preferably by doing a Ctrl+F in View Source. 最好在View Source中执行Ctrl + F.
Validate your HTML. 验证您的HTML。 Make sure you are not missing any closing tags or quotes in an attribute. 确保您没有遗漏属性中的任何结束标记或引号。

Answer 2

You are passing "false" for the async parameter to xmlhttp.open() call. 您正在将async参数的“false”传递给xmlhttp.open（）调用。 Because the stack has not unwound since you set the innerHTML property of the calc element, IE has not had a chance to repaint the screen. 由于您设置了calc元素的innerHTML属性，因此堆栈尚未展开，因此IE没有机会重新绘制屏幕。

You have a few options. 你有几个选择。

Restructure your code such that you make the ajax call async and get the result via a callback notification. 重构代码，使ajax调用async并通过回调通知获取结果。
OR.... Set the innerHTML property on calc, then call setTimeout with a delay of 0 and a callback function that is written to call xmlhttp.open as you have it now. 或者......在calc上设置innerHTML属性，然后调用setTimeout，延迟为0，并调用一个回调函数来调用xmlhttp.open，就像现在一样。 This will allow the stack to unwind and IE will repaint the DOM changes followed by your ajax call executing. 这将允许堆栈展开，IE将重新绘制DOM更改，然后执行ajax调用。 Below is a hacked up version of your code to demonstrate what I am talking about. 下面是您的代码的黑客版本，以演示我正在谈论的内容。

Below is some hacked up code demonstrating #2. 下面是一些显示＃2的黑客代码。

var xmlhttp;

function recalc() {
    xmlhttp=new XMLHttpRequest();
    if (xmlhttp==null)
    {
      var tmp = "Your browser does not support XML! ";
      tmp += "Please contact your Technical Support division for information on how to upgrade.";
      alert(tmp);
    }
    else
    {
      document.getElementById('calc').innerHTML = 'Calculating...';
      document.getElementById('calc').disabled = true;
      setTimeout(recalc_start, 0);
    }
}

function recalc_start() {
  var url = "http://www.nzherald.co.nz/";

  xmlhttp.open("GET",url,false);
  xmlhttp.send(null);
  if (xmlhttp.responseText.indexOf("Success")>=0) {
    alert(xmlhttp.responseText);
  }
  else {
    alert(xmlhttp.responseText);
  }
  document.getElementById('calc').value = 'Recalculate';
  document.getElementById('calc').disabled = false;
}

Answer 3

I am assuming this is an <input id='calc' type='text' /> element: 我假设这是一个<input id='calc' type='text' />元素：

document.getElementById('calc').value = 'Calculating...';
document.getElementById('calc').setAttribute('disabled','disabled');

For best mutli-browser compatibility, try using jQuery: 为了获得最佳的多浏览器兼容性，请尝试使用jQuery：

$("#calc").val('Calculating...').attr('disabled','disabled');

Internet Explorer不按顺序执行Javascript

问题描述

3 个解决方案

解决方案1
1 2012-01-18 03:19:21

解决方案2
1 已采纳 2012-01-18 04:50:32

解决方案3
0 2012-01-18 01:01:49

Internet Explorer不按顺序执行Javascript

问题描述

3 个解决方案

解决方案1 1 2012-01-18 03:19:21

解决方案2 1 已采纳 2012-01-18 04:50:32

解决方案3 0 2012-01-18 01:01:49

解决方案1
1 2012-01-18 03:19:21

解决方案2
1 已采纳 2012-01-18 04:50:32

解决方案3
0 2012-01-18 01:01:49