如何防止用户不小心多次点击按钮导致多次提交

来源:互联网 发布:银行it团队口号 知乎 编辑:程序博客网 时间:2024/06/06 06:12

产生原因

  • 如果网速慢的情况下,用户点击按钮提交后,如果接口还没有返回数据的话,用户会不耐烦的再点击一次提交按钮

解决方法

  • 最简单的解决方法就是,把所有的按钮都写成 button 元素,如果是 div 元素的话,disabled属性是失效的
  • 用户第一次点击按钮,将该按钮设成成禁用状态

    $('button').attr('disabled', 'disabled');

    这个时候,按钮的点击事件已经失效

  • 当后台返回数据后,再把禁用属性移除

    $('button').removeAttr('disabled');

    这个时候,用户可以考虑是否进行再一次提交

1 0