如何在按钮点击后设置setTimeout？实现加载图标5秒后消失

很简单，只需要在你的点击事件里添加setTimeout定时器，同时提前保存按钮原本的文本内容，这样5秒后就能恢复按钮的初始状态啦。

下面是修改后的完整代码：

HTML（保持不变） #

<button type="submit" name="register" id="btnreg" class="btn btn-primary btn-block btn-large">Start</button>

JavaScript（修改后） #

$(function() {
  $('#btnreg').click(function(e) {
    // 如果你是表单提交按钮，这里建议阻止默认提交行为，避免页面跳转导致定时器失效
    e.preventDefault();
    
    const originalText = $(this).html(); // 保存按钮原本的内容
    $(this).html('<i class="fas fa-cog fa-spin"></i>'); // 替换为加载图标
    
    // 5秒后恢复按钮初始状态
    setTimeout(() => {
      $(this).html(originalText);
    }, 5000); // 5000毫秒 = 5秒
  });
});

关键点说明： #

• 提前保存originalText：这样我们能准确恢复按钮原来的文字，避免硬编码写死“Start”，后续如果按钮文本修改也不用改JS代码，更灵活。
• e.preventDefault()：如果这个按钮是表单的提交按钮，一定要加这一行，否则页面会直接提交跳转，定时器还没执行就失效了。如果只是普通功能按钮，可以去掉这行。
• setTimeout的第二个参数是毫秒数，5000对应5秒，时间到了就会执行回调函数，把按钮内容改回初始状态。

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