亲宝软件园·资讯

展开

vue 禁止重复点击发送多次请求的实现

kite吖 人气:0

某些情况下,为了阻止用户短时间内重复点击某个按钮,导致前端向后端重复发送多次请求。

1.通过控制 loading 来设置 loading,或者 disabled

刚开始直接给按钮加上loading效果,即在请求前 loading为true, 在请求结束finally里loading置为false,以达到阻止重复点击的问题,但部分请求短时间内,用户依然可以双击触发多次请求。

2.使用Vue自定义指令

// 全局注册自定义指令
Vue.directive("resetClick", {
  inserted(el, binding) {
    el.addEventListener("click", () => {
      if (!el.disabled) {
        el.disabled = true;
        el.style.cursor = "not-allowed";
        setTimeout(() => {
          el.disabled = false;
          el.style.cursor = "pointer";
        }, binding.value || 1000);
      }
    });
  },
});
 
// 组件内使用
<el-button type="primary" v-resetClick="1000" @click="confirm">
    确 定
</el-button>

3. 使用debounce函数

在工具类util.js文件中定义 防抖函数 (或直接使用第三方库 throttle-debounce等)

// 防抖debounce代码:
function debounce(fn, delay) {
  let timeout = null // 创建一个标记用来存放定时器的返回值
  return function (e) {
    // 每当用户输入的时候把前一个 setTimeout clear 掉
    clearTimeout(timeout)
    // 然后又创建一个新的 setTimeout, 这样就能保证interval 间隔内如果时间持续触发,就不会执行 fn 函数
    timeout = setTimeout(() => {
      fn.apply(this, arguments)
      timeout = null
    }, delay)
  }
}

vue组件中使用

<template>
  <div>
    <el-button type="primary" @click="handleClick">快速连续点击</el-button>
  </div>
</template>
 
<script>
import { debounce } from '@/util/util.js'
 
export default {
  data() {
    return {}
  },
  methods: {
    handleClick: debounce(() => {
      console.log('删除操作等业务逻辑')
    }, 500),
  },
}
</script>
 
<style></style>

以上两种方式都存在问题

这两种方式已经基本上能满足防重复点击的需求,但实际测试时发现延时的时间不好控,如果延时时间短(<150ms)快速点击还是会有几率多次触发事件。如果延时时间长(>600ms),用户点击后会有个明显的延时过程才能触发事件,用户体验就不太好。

首先明确下我们想要实现的效果。

4.最终解决方案lodash

lodash官方文档——debounce

npm i lodash -S

组件中使用

<template>
  <div>
    <el-button type="primary" @click="handleClick">快速连续点击</el-button>
  </div>
</template>
 
<script>
import { debounce } from 'lodash'
 
export default {
  data() {
    return {}
  },
  methods: {
    handleClick: debounce(
      () => {
        console.log('删除操作等业务逻辑')
      },
      500,
      {
        leading: true, // 在延迟开始前立即调用事件
        trailing: false, // 在延时结束后不调用,保证事件只被触发一次
      },
    ),
  },
}
</script>

加载全部内容

相关教程
猜你喜欢
用户评论