AJAX请求前修改按钮文本无效，需等待success执行后才变更的原因

你的问题出在**同步AJAX请求（async: false）**上。浏览器的JavaScript执行和UI渲染共用同一个主线程，当开启同步AJAX时，这个线程会被彻底阻塞，直到AJAX请求完全结束。

你虽然在AJAX前执行了修改按钮文本和禁用按钮的代码，但浏览器此时被同步请求卡住，根本没时间更新页面UI，只能等success回调执行完、同步请求结束后，才会把之前的UI变更渲染出来。

把同步AJAX改成异步（这也是jQuery AJAX的默认行为），只需要删掉async: false这一行即可。这样AJAX请求会在后台执行，不会阻塞UI线程，按钮文本和状态的变更能立刻显示出来。

修改后的代码：

$(function() {
  $("#contactbutton").click(function(e) {
    var $this = $(this);
    $this.text('Submitting....');
    $this.prop('disabled', true); // 直接用$this更高效，避免重复调用选择器
    e.preventDefault();
    var name = $("#name").val();
    var dataString = 'name=' + name;
    
    $.ajax({
      type: "POST",
      url: "emailsend.php",
      data: dataString,
      success: function() {
        window.open("thankyou.php");
      }
      // 移除async: false，默认即为异步模式
    });
    
    return false;
  });
});

额外提醒：同步AJAX会导致页面完全卡顿，用户体验极差，现在几乎没有场景需要使用同步AJAX，建议始终采用异步模式实现交互。

内容的提问来源于stack exchange，提问作者Ganesh P