Internet Explorer不按顺序执行Javascript

Question

我正在开发一个Web应用程序，需要进行一些后端处理，同时仍然在屏幕上显示信息。 显然这最适合我正在使用的AJAX。 但是，在开始AJAX请求之前，我正在通过Javascript进行一些视觉上的更改。 特别：

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

然后我继续通过AJAX调用servlet。

这在Firefox中运行良好。 但是在Internet Explorer（版本8）中，视觉更改永远不会生效。 应用程序只是坐在那里一两分钟，直到AJAX处理完成。 似乎AJAX代码在页面更改之前执行，但我不知道为什么会这样。

任何帮助将不胜感激。

编辑：这是我在短暂的，自包含的，正确的，例子中的最大努力

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

这个唯一的问题是这个URL几乎立即返回。 在我的应用程序上，它指向一个数据库处理大约一分钟的页面，因此问题更加明显。

Answer 1

这两行代码非常简单。 有两件事情浮现在脑海中：

您是否为其他元素定义了ID。 你能仔细检查一下在页面的其他地方没有使用calc吗？ 最好在View Source中执行Ctrl + F.
验证您的HTML。 确保您没有遗漏属性中的任何结束标记或引号。

Answer 2

您正在将async参数的“false”传递给xmlhttp.open（）调用。 由于您设置了calc元素的innerHTML属性，因此堆栈尚未展开，因此IE没有机会重新绘制屏幕。

你有几个选择。

重构代码，使ajax调用async并通过回调通知获取结果。
或者......在calc上设置innerHTML属性，然后调用setTimeout，延迟为0，并调用一个回调函数来调用xmlhttp.open，就像现在一样。 这将允许堆栈展开，IE将重新绘制DOM更改，然后执行ajax调用。 下面是您的代码的黑客版本，以演示我正在谈论的内容。

下面是一些显示＃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

我假设这是一个<input id='calc' type='text' />元素：

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

为了获得最佳的多浏览器兼容性，请尝试使用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