如何实现点击按钮后延迟3秒加载再跳转至其他页面的功能

解决方案 #

核心问题修复点 #

• 原 inline 点击事件的 this 指向错误，且延迟1.5秒才触发加载状态不符合需求
• 缺失跳转逻辑，也没有做重复点击防护避免多次触发跳转

完整可运行代码 #

你原有CSS不需要修改，只需要替换HTML部分、新增一段JS逻辑即可：

<!-- 修改后的按钮代码 -->
<button type="button" class="button" onclick="handleBtnJump(this, 'https://你要跳转的目标地址.com')">
  <span class="button__text">Submit</span>
</button>

<script>
function handleBtnJump(btn, targetUrl) {
  // 点击后立刻切换加载状态，同时禁用按钮防止重复点击
  btn.classList.add('button--loading')
  btn.disabled = true

  // 延迟3秒跳转
  setTimeout(() => {
    // 同窗口跳转用下面这行，要改跳转地址直接修改按钮标签里的第二个参数即可
    window.location.href = targetUrl
    // 如果需要新窗口打开跳转，替换上面的行用下面这句
    // window.open(targetUrl, '_blank')
  }, 3000)
}
</script>

可调整项 #

• 把按钮onclick里的第二个参数替换成你实际需要跳转的目标地址即可
• 3000对应的是延迟毫秒数，需要调整延迟时长直接修改这个数值即可
• 如果是单页应用内不刷新页面的跳转场景，可以在跳转逻辑后添加 btn.classList.remove('button--loading')、btn.disabled = false 恢复按钮初始状态

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