防止多次点击重复发起请求的前端方案

1、防止恶意重复快速点击

//给按钮添加控制,在control 毫秒内,第一次点击事件之后的点击事件不执行。
//当然时间间隔可以设置,默认为300毫秒。我们无意识的重复点击一般在300毫秒以内。
 handleClick(event) {
     if (this.disabled) return;
     if (this.notAllowed) return;
     // 点击完多少秒不能继续点
     this.notAllowed = true;
     setTimeout(()=>{
          this.notAllowed = false;
      }, this.control)
      this.$emit('click', event, this);
  }

2、按钮点击立马禁用,等响应回来才能继续点击

const action = function (url, data, option) {
    // 如果传了button
    if (option.button) {
        option.button.currentDisabled = true;
    }
    // 记录日志
    const log = requsetLog.creatLog(url, data);

    return param(url, data, option)
        .then(success, fail)
        .then((response) => {
            requsetLog.changeLogStatus(log, 'success');
            if (option && option.button) {
                option.button.currentDisabled = false;
            }
            return response;
        })
        .catch((error) => {
            requsetLog.changeLogStatus(log, 'fail');
            if (option && option.button) {
                option.button.currentDisabled = false;
            }
            error.message && window.Toast.error(error.message);
            throw error;
        });
};
posted @ 2021-12-01 10:03  SultanST  阅读(165)  评论(0编辑  收藏  举报