JavaScript alert() 取代了前置代码。

Question

我有一个带有提交按钮的联系表单。一旦从处理提交数据的服务器端PHP接收到响应，我使用JQuery按照以下顺序执行以下操作：

1. 将按钮文本更改为“发送”
2. 在警报中显示收到的响应

代码很简单：

submit_button.text('Send');
alert(response);

然而，无论如何alert()似乎总是在文本更改之前触发。这是设计上的吗？有什么技巧可以改变顺序吗？我需要在弹出警告框之前更改按钮的文本。我甚至试图使用以下方法，但都无济于事：

submit_button.text('Send');
if(submit_button.text() == 'Send') { alert(response); }

如果这个问题已经在其他地方得到解答，我很抱歉，并请求您指出正确的方向。

- TheLearner

---

你为什么需要首先使用本地警报？请提供一个 [mcve]。 - charlietfl

警告是为了告诉用户电子邮件是否发送，如果没有发送，则告知原因。如果您需要实时查看原型，请访问peppyburro.com/sandboxindex。只需从导航栏菜单中单击HELP->CONTACT US即可。 - TheLearner

可能是重复的问题：为什么这个警告在早期代码执行完成之前就触发了？ - Vaibhav Kumar

请查看此链接：https://dev59.com/E3HYa4cB1Zd3GeqPHhpM - Vaibhav Kumar

简单的解决方案是不使用 alert。 - charlietfl

可能是Javascript alert box shows up before executing previous statement的重复问题。 - insertusernamehere

Answer 1

你可以将alert调用包装到setTimeout调用中，这将把alert调用放置在事件循环的末尾，并给浏览器更新DOM的时间。

submit_button.text('Send');
setTimeout(function () { alert(response); }, 1);

小提琴：https://jsfiddle.net/sn9cbqz3/3/

- Guilherme Sehn

---

啊，你比我快了40秒！ - Rik Lewis

由于在一些旧系统上，技术上1毫秒可能不足以更新按钮文本，因此您还可以“真正”等待它更改，然后使用以下代码显示警报： submit_button.text('Send'); while(submit_button.text()!='Send'); alert('test'); - mrbm

Answer 2

问题在于脚本继续执行而没有给DOM更新的时间。你可以使用setTimeout来实现你想要的效果：

submit_button.text('Send');
setTimeout(function(){
      alert(response);
},10);

- yadejo

Answer 3

我认为可以通过使用setTimeout来解决这个问题，让浏览器完成线程和重新绘制操作，在触发弹窗之前等待一段时间，像这样...

submit_button.text('Send');
setTimeout(function() {alert(response);},0);

- Rik Lewis

Answer 4

作为JavaScript警告框在执行前出现的响应者

只要您的JavaScript代码正在运行，浏览器中的更改就不会显示出来。

浏览器是事件驱动的，因此更改DOM中的元素不会立即显示更改，而是触发事件以重新绘制元素。当您的函数运行完成后，浏览器将处理任何未决事件并显示更改。

因此，在构建应用程序时，您必须使用相同的方法，以便浏览器有机会显示更改。 作者：Guffa

超时建议基本上是您最好的选择。

submit_button.text('Send');
setTimeout(function () { alert(response); }, 1);

由Rik Lewis建议

- Atska