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