未执行AJAX / XMLHttpRequest调用之前的代码行

Question

这是我在Javascript中拥有的以下代码：

document.getElementById("button").disabled = true;
document.getElementById("button").innerHTML = "Please Wait...";

var xhttp = new XMLHttpRequest();
xhttp.open("GET", "MoodInput"+ "?moodValue=" + input, false);
xhttp.send();

当我将表单提交到Servlet时，似乎首先执行xhttp.send（）函数。 但是，我希望首先执行以下两行：

document.getElementById("button").disabled = true;
document.getElementById("button").innerHTML = "Please Wait...";

我该怎么办才能解决问题？ 它必须是同步的，因为servlet中有一个thread.sleep方法，以便Arduino与Serial Port连接并进行设置。

Answer 1

当JavaScript函数运行时，浏览器根本不会做很多事情，这包括重新绘制DOM。

您的代码按照您想要的顺序运行，并且DOM正在更新，只是页面没有被所做的更改重新绘制。

它必须是同步的

不建议使用同步XMLHttpRequest，因为它们会导致浏览器在等待响应时锁定。 即因为它们导致您遇到的问题。

因为servlet中有一个thread.sleep方法，以便Arduino与串行端口连接并进行设置。

使用同步或异步请求不会受到影响。

您可能希望在收到响应后运行其他一些您在问题中遗漏的JS 。

如果是这样，真正的解决方案是在请求完成后采取您想做的所有事情，然后将其移至您指定为XHR对象的装入事件处理程序的函数。

Answer 2

button input type="button"不使用innerHTML作为它使用value的文本：

document.getElementById("button").value = "Please Wait...";

您正在使用输入或按钮元素吗？