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

目录
  • 1.通过控制 loading 来设置 loading，或者 disabled
  • 2.使用Vue自定义指令
  • 3. 使用debounce函数
  • 4.最终解决方案lodash

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

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>

到此这篇关于vue 禁止重复点击发送多次请求的实现的文章就介绍到这了,更多相关vue 禁止重复点击内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决vue 按钮多次点击重复提交数据问题

    这个其实是一个很细节的问题. 如果我们操作一个按钮,然后在按钮点击的时候绑定事件. 事件分为两种情况: •第一种: 不操作数据型 •第二种: 操作数据型 <template> <button @click="submit()" :disabled="isDisable">点击</button> </template> <script> export default { name: 'TestButton',

  • vue axios重复点击取消上一次请求封装的方法

    使用场景 重复点击或者多tab标签使用一个视图等(当然也可以用加载中或者透明背景禁止请求中再次点击) 封装代码 来自于互联网 let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识 let cancelToken = axios.CancelToken; let removePending = (config) => { for(let p in pending){ if(pending[p].u === config.url + '&' + conf

  • vue 如何处理防止按钮重复点击问题

    目录 处理防止按钮重复点击 vue防止重复执行点击事件 方法一:在规定时间内将按钮禁用的方法 方法二:用指令的方式实现,全局注册 处理防止按钮重复点击 1.在button上绑定动态的disabled <el-button type="primary" size="mini" @click="testCode" :disabled="codeDisabled">发送验证码</el-button> 2.在d

  • Vue如何防止按钮重复点击方案详解

    目录 前言 目的 文件结构 实现 请求拦截 响应拦截 取消重复发送请求 调用 前言 Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中. axios 是目前最优秀的 HTTP 请求库之一, 我们封装 axios 请求也是为了让代码看的更加清晰, 后期好维护. 目的 实现请求拦截 实现响应拦截 常见错误处理 不能请求头设置 api 集中式管理 (取消重复请求,重复发送请求, 请求缓存等情况均还未实现) 文件结构 实现 index.js内代码如下: 引入

  • Vue中的全局指令防止按钮重复点击

    目录 全局指令防止按钮重复点击 1.common.js 2.在需要引入的页面引入(**.vue) 防重复点击(vue指令实现) 阻止快速点击按钮会重复多次调用接口的 全局指令防止按钮重复点击 1.common.js 首先引入Vue import Vue from 'vue'; const preventReClick = Vue.directive('preventReClick', {   inserted: function (el, binding) {     el.addEventLi

  • 在vue中使用防抖和节流,防止重复点击或重复上拉加载实例

    废话不多说,直接上代码吧! /** * 函数防抖 (只执行最后一次点击) * @param fn * @param delay * @returns {Function} * @constructor */ export const Debounce = (fn, t) => { let delay = t || 500; let timer; console.log(fn) console.log(typeof fn) return function () { let args = argum

  • Vue router/Element重复点击导航路由报错问题及解决

    Vue router/Element重复点击导航路由报错问题及解决

    目录 Vue router/Element重复点击导航路由报错 解决方法如下 Vue使用element-UI路由报错问题 报错代码 修改方案 Vue router/Element重复点击导航路由报错 虽然此报错并不会影响项目运行,但是作为一个强迫症的码农的确受不了error 解决方法如下 方法1:在项目目录下运行 npm i vue-router@3.0 -S 将vue-router改为3.0版本即可: 方法2:若不想更换版本解决方法 在router.js中加入以下代码就可以 记住插入的位置 c

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

    目录 1.通过控制 loading 来设置 loading,或者 disabled 2.使用Vue自定义指令 3. 使用debounce函数 4.最终解决方案lodash 某些情况下,为了阻止用户短时间内重复点击某个按钮,导致前端向后端重复发送多次请求. 1.通过控制 loading 来设置 loading,或者 disabled 刚开始直接给按钮加上loading效果,即在请求前 loading为true, 在请求结束finally里loading置为false,以达到阻止重复点击的问题,但部

  • Asp.net mvc 权限过滤和单点登录（禁止重复登录）

    1.权限控制使用controller和 action来实现,权限方式有很多种,最近开发项目使用控制控制器方式实现代码如下 /// <summary> /// 用户权限控制 /// </summary> public class UserAuthorize : AuthorizeAttribute { /// <summary> /// 授权失败时呈现的视图 /// </summary> public string AuthorizationFailView

  • JS实现点击发送验证码 xx秒后重新发送功能

    用于一些注册类的场景,点击发送验证码,xx秒后重新发送. 利用 setTimeout 方法,xx秒后执行指定的方法,修改button的属性值,disabled为true时为灰色,不可点击. <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--<scrip

  • Vue路由重复点击报错问题及解决

    目录 vue路由重复点击时会出现报错 局部处理 全局处理 vue 重复点击菜单,路由重复报错解决 报错原因 解决方法 总结 vue路由重复点击时会出现报错 Uncaught (in promise) NavigationDuplicated: Avoided redundant navigation to current location:XXX 虽然不影响运行结果,但最好还是处理一下. 局部处理 局部处理是指对单个路由进行处理,其他的路由依旧报错. 在路由跳转的push语句中添加catch捕捉

  • vue解决一个方法同时发送多个请求的问题

    在项目开发过程中,让人抓狂之一的问题就是一个点击事件,当快速点击的时候,它会重复发送多个请求.这是不允许出现的. 但是怎么解决这个问题呢? 一般处理方法,就是点击的时候,立刻将该按钮disabled,这样就可以避免重复发送请求了.但是我发现这个有一个弊端,那就是: 如果,该事件有许多的验证,比如电话.邮箱格式是否正确呀,必填的是否填了呀等等.一旦你点击就把按钮disabled了,发现该填的没填,回去填完后发现按钮不能点了?那是因为刚才点击的时候被你disabled了,所以还得在验证的方法中取消按

  • Vue 防止短时间内连续点击后多次触发请求的操作

    如果连续点击提交按钮,可能会重复提交数据,导致出错,解决的方法可以使用disabled限制点击,感觉体验不是太好,所有给大家分享下面的方法 <el-button @click="throttle()">测试</el-button> export default { data(){ return { lastTime:0 //默认上一次点击时间为0 } } } methods:{ throttle(){ //获取当前时间的时间戳 let now = new Dat

  • 在Vue组件化中利用axios处理ajax请求的使用方法

    本文主要给大家介绍了关于在Vue组件化中利用axios处理ajax请求的使用方法,分享出来供大家参考学习,下面话不多说了,来一起看看详细的介绍吧. 推荐方式 首先在 main.js 中引入 axios // 引入 axios import axios from 'axios' 这时候如果你想在其它的组件中使用axios进行ajax请求是或提示报错的,报错内容大致是axios is undefined. 我们通常的决绝方案是将axios改写为 Vue 的原型属性,如2 将axios写入Vue的原型

  • Vue 2.5.2下axios + express 本地请求404的解决方法

    最近在学习Vue,今天尝试了使用axios模拟本地网络请求.使用的过程中发现接口请求一直404,后来发现在当期的Vue-cli构建的最新的项目中,接口请求应该这样写. 1.引入相关依赖 var axios = require('axios') const express = require('express'); var app = express(); var apiRoutes = express.Router(); app.use('/api', apiRoutes); 2.处理网络请求

  • 通过vue提供的keep-alive减少对服务器的请求次数

    下面看下通过vue提供的keep-alive减少对服务器的请求次数 VUE2.0中提供了一个keep-alive方法,可以用来缓存组件,避免多次加载相应的组件,减少性能的消耗.比如, 一个页面的数据包括图片.文字等用户都已经加载完了,然后用户通过点击跳转到了另外一个界面.然后从另外一个界面通过返回又回到了原先的界面.如果没有设置的话,那么原先界面的信息就要重新向服务器请求得到.而通过vue提供的keep-alive可以是页面的已经请求的数据得以保存,减少请求的次数,提高用户的体验程度. 缓存组件

  • vue+springboot实现项目的CORS跨域请求

    跨域资源共享CORS(Cross-origin Resource Sharing),是W3C的一个标准,允许浏览器向跨源的服务器发起XMLHttpRequest请求,克服ajax请求只能同源使用的限制.关于CORS的详细解读,可参考阮一峰大神的博客:跨域资源共享CORS详解.本文为通过一个小demo对该博客中分析内容的一些验证. 1.springboot+vue项目的构建和启动 细节不在此赘述,任何简单的springboot项目就可以,而前端vue项目只需用axios发ajax请求即可. 我的d

随机推荐