如何实现点击按钮后文本切换，2秒后自动恢复原文本？

jQuery(function($) {
  let timer; // 保存定时器ID，避免重复触发恢复操作
  $("#shahadas").click(function() {
    const $btn = $(this);
    const originalText = 'Did 100 Push Ups!';
    const rewardText = '1,000 Coins Awarded!';
    
    // 清除之前的定时器，防止重复点击导致多次执行恢复
    clearTimeout(timer);
    
    if ($btn.text() === originalText) {
      $btn.text(rewardText);
      // 2秒后自动恢复原文本
      timer = setTimeout(() => {
        $btn.text(originalText);
      }, 2000);
    } else {
      // 当前已是奖励文本时，点击直接切回原文本
      $btn.text(originalText);
    }
  });
});

关键点说明 #

• 新增timer变量存储定时器ID，每次点击先清除旧定时器，避免重复点击导致多次触发文本恢复
• 把固定文本抽成变量，后续修改文本内容时更便捷
• 仅在从原文本切换到奖励文本时启动恢复定时器，逻辑更贴合需求

内容的提问来源于stack exchange，提问作者Amr Ali Ibrahim