API调用期间禁用按钮问题：点击后按钮未按预期禁用

我想要实现点击按钮后，在调用API的函数执行期间禁用该按钮，待函数执行完成后重新启用按钮。我尝试了多种写法，包括使用attr()/removeAttr()方法，以及如下代码中使用$(this)和$('#miss')的写法，但奇怪的是：仅保留禁用按钮的代码行时，按钮能正常禁用；但同时执行禁用再启用的代码（如下方代码所示）时，按钮从未被禁用。请问我忽略了什么？

$('#miss').click(function() { 
  $(this).prop('disabled', true); 
  registerShot('miss'); 
  $(this).prop('disabled', false); 
});

嗨，这个问题其实很常见，核心原因是**registerShot('miss')大概率是一个异步操作**（比如内部用了AJAX请求或者fetch调用API），而你的代码是同步执行的：

1. 你先把按钮设为禁用状态
2. 立刻调用registerShot，但这个函数不会阻塞代码执行——它会发起API请求，然后直接往下走
3. 紧接着你又把按钮设为启用状态，这时候API请求可能还在进行中，所以你根本看不到按钮被禁用的状态

简单说就是代码执行太快了，禁用和启用几乎在同一瞬间完成，浏览器还没来得及渲染禁用的状态，就又变回启用了。

那怎么解决呢？你需要等到registerShot的异步操作完成后，再启用按钮。这里分两种情况处理：

情况1：registerShot返回Promise #

如果registerShot是基于Promise的（比如用了fetch或者封装了AJAX为Promise），可以用async/await或者.then()：

用async/await的写法：

$('#miss').click(async function() { 
  const $btn = $(this);
  $btn.prop('disabled', true); 
  try {
    await registerShot('miss'); // 等待API调用完成
  } catch (err) {
    console.error('API调用出错:', err);
    // 这里可以加错误处理，比如提示用户
  } finally {
    $btn.prop('disabled', false); // 不管成功失败都启用按钮
  }
});

用.then()的写法：

$('#miss').click(function() { 
  const $btn = $(this);
  $btn.prop('disabled', true); 
  registerShot('miss')
    .then(() => {
      // API调用成功后的逻辑
    })
    .catch(err => {
      console.error('API调用出错:', err);
    })
    .finally(() => {
      $btn.prop('disabled', false);
    });
});

情况2：registerShot用的是传统的回调函数 #

如果registerShot是通过回调来通知完成的（比如老版本的jQuery AJAX），那你需要把启用按钮的代码放到回调函数里：

// 假设registerShot的第二个参数是回调函数
$('#miss').click(function() { 
  const $btn = $(this);
  $btn.prop('disabled', true); 
  registerShot('miss', function() {
    // API调用完成后执行这里
    $btn.prop('disabled', false);
  });
});

另外补充一点：建议用prop()而不是attr()来设置disabled状态，因为disabled是DOM元素的属性（property），而attr()操作的是HTML属性，对于布尔类型的属性，prop()的表现更准确，你之前用prop()的选择是对的~

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