延迟反馈导致用户重复点击怎么办？

ლ甜雅提问于 2026-03-29 22:50:14 阅读 3

交互

我在做一个表单提交功能，用户点“提交”后要等2秒左右才有响应，结果很多人以为没点上就狂点好几次，最后重复提交了。这咋整？

我试过加个 loading 状态禁用按钮，但好像没生效，按钮还是能点。是不是我的写法有问题？

<template>
  <button @click="handleSubmit" :disabled="isLoading">
    {{ isLoading ? '提交中...' : '提交' }}
  </button>
</template>

<script setup>
import { ref } from 'vue'
const isLoading = ref(false)
const handleSubmit = async () => {
  isLoading.value = true
  await api.submitForm() // 模拟网络请求
  isLoading.value = false
}
</script>

我来解答赞 3 收藏

反馈

1 条解答

国凤 Lv1

最简单的办法是把按钮禁用状态的设置放在点击事件一开始。另外记得捕获可能的异常，不然 loading 状态可能会一直卡住。代码改下：

const handleSubmit = async () => {

  isLoading.value = true

  try {

    await api.submitForm()

  } catch (e) {

    console.error(e)

  } finally {

    isLoading.value = false

  }

}

这样写基本上能解决问题，别忘了在 finally 里恢复状态。

2026-03-29 23:02