javascript - Internet Explorer 未按顺序执行 Javascript

标签 javascript html ajax internet-explorer

我正在开发一个网络应用程序,它需要进行一些后端处理,同时仍然在屏幕上显示信息。显然,这最适合我正在使用的 AJAX。但是,在开始 AJAX 请求之前,我通过 Javascript 进行了一些视觉更改。具体来说:

document.getElementById('calc').innerHTML = '正在计算...'; 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 几乎立即返回。在我的应用程序中,它指向一个进行数据库处理大约一分钟的页面,因此问题更加明显。

最佳答案

您正在将异步参数的“false”传递给 xmlhttp.open() 调用。因为在您设置了 calc 元素的 innerHTML 属性后堆栈还没有展开,所以 IE 没有机会重新绘制屏幕。

您有几个选择。

  1. 重组您的代码,使 ajax 调用异步并通过回调通知获取结果。

  2. 或....在 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;
}

关于javascript - Internet Explorer 未按顺序执行 Javascript,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8903624/

相关文章:

javascript - 表单输入历史选择事件

python - 将 html 写入 csv 时出现奇怪的格式

javascript - 如果至少选中一个复选框,则应启用按钮

javascript - 无法更新 jQuery 中文本框的值

jquery - 如何控制ajax请求中的缓存控制

javascript - 使用ajax(不使用jQuery)发送php数组会在服务器上产生错误数据

javascript - 如何改善 eslint-plugin-Angular watch 错误?

javascript - Node.js RESTful API。发帖后回复

javascript - 即 : why isn't AJAX resulting HTML updated in DOM?

html - mailto 的语法