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

【问题标题】：Lines of code before AJAX/XMLHttpRequest Call not executed未执行 AJAX/XMLHttpRequest 调用之前的代码行
【发布时间】：2018-06-19 07:03:30
【问题描述】：

这是我在 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 与串行端口连接并进行设置。

【问题讨论】：

你的意思是什么？您是否分别测试了两个代码块？也许第一个块根本不起作用。
它正在工作，但只有在调用 Ajax 之后。我想要的是在第二个块之前首先执行的第一个块。
您能否编辑帖子并分享确切的代码 sn-p .. 如果我可以假设您已经修改并仅发布了所需的数据.. 以您使用的确切格式分享它
您使用的是input type="button" 还是按钮元素？请参阅下面的答案。

标签： javascript html ajax xmlhttprequest

【解决方案1】：

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

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

它必须是同步的

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

因为 servlet 中有一个 thread.sleep 方法，以便 Arduino 与 Serial Port 连接并设置。

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

您可能想要运行 其他一些 JS，这些 JS 在收到响应后被排除在您的问题之外。

如果是这样，真正的解决方案是在请求完成后获取您想要执行的任何操作，并将其移动到您指定为 XHR 对象的加载事件处理程序的函数中。

【讨论】：

【解决方案2】：

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

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

您使用的是输入还是按钮元素？

【讨论】：

啊，我明白了我在那里做了什么。我意思是 <input type="button"...，而不是button 元素，这是我对我的代码的假设。我将更新我的答案，但我们在 OP 中没有任何 html，所以这可能适用也可能不适用。虽然，如果 OP 使用按钮，他们应该没有问题。