问题描述

用户短时间快速点击,向后台发起多次请求

项目中有如图所示弹窗,用户编辑完成之后,快速点击确定,进行保存.
列表中会展示刚才保存的数据,可以看到出现了重复的数据.虽然后端已经加了参数名不能重复的校验,但是仍然可以成功保存.此时就需要前端进行节流限制

解决方案：

采用节流函数对快速点击的操作进行限制：

先在项目中公共的js中编写节流函数 throttle 方便后续多个地方使用

//节流
export function throttle(fn, time) {let timer = nulltime = time || 1000return function (...args) {if (timer) {return}const _this = thistimer = setTimeout(() => {timer = null}, time)fn.apply(_this, args)}
}

在需要的页面中引入节流函数,对需要进行节流的操作进行包裹.
throttle函数的两个参数第一个是要执行的函数第二个为节流时间.
这里有个坑,因为是在vue项目,所以经常需要this,但是网上好多节流函数的第一个参数都是用箭头函数写,所以导致内部指向并不是vue实例,如果你的执行函数中,需要用到this,请不要使用箭头函数,按照我这样写,this指向为vue实例,

import { throttle } from '@/assets/js/public.js';method:{//保存自定义参数(这个就是点击确定触发的操作)saveCustomerParameter: throttle(function () {console.log('这是你要进行的操作')}, 800),
}

完成上述操作后,再回去测试一下,看看是不是节流时间内,多次的操作只执行了一次.

vue项目中使用节流throttle相关推荐

canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
如何在Vue项目中使用vw实现移动端适配(转)
有关于移动端的适配布局一直以来都是众说纷纭,对应的解决方案也是有很多种.在<使用Flexible实现手淘H5页面的终端适配>提出了Flexible的布局方案,随着viewport单位越来越 ...
实战：vue项目中导入swiper插件
版本选择 swiper是个常用的插件,现在已经迭代到了第四代:swiper4. 常用的版本是swiper3和swiper4,我选择的是swiper3. 安装安装swiper3的最新版本3.4.2: ...
vue ajax highcharts,在vue项目中引入highcharts图表的方法(详解)
npm进行highchars的导入,导入完成后就可以进行highchars的可视化组件开发了 npm install highcharts --save 1.components目录下新建一个char ...
VUE项目中使用this.$forceUpdate()；解决页面v-for中修改item属性值后页面v-if不改变的问题
VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题参考文章: (1)VUE项目中使用this.$forceUpdate();解决 ...
在vue项目中：统一封装 Axios 接口与异常处理
在vue项目中:统一封装 Axios 接口与异常处理参考文章: (1)在vue项目中:统一封装 Axios 接口与异常处理 (2)https://www.cnblogs.com/itgezhu/p/ ...
vue php跨域,Vue 项目中遇到的跨域问题及解决方法(后台php)
问题描述前端 vue 框架,后台 php,百度跨域问题后台加这段代码 header("Access-Control-Allow-Origin: *"); 加了之后报这个错: Th ...
Typescript在Vue项目中的使用
最近尝试了一下Typescript在Vue项目中的使用,中间遇到了一些问题,把遇到的问题记录一下,以防被忘. 如何让Typescript识别Vue.JSON文件因为Typescript默认不能识别. ...
vue项目中使用echarts实现词云
0.先上效果图 1.安装插件 -- vue项目中 npm install echartsnpm install echarts-wordcloud 2.vue页面中引入组件 <word-clou ...

vue项目中使用节流throttle

问题描述

解决方案：

vue项目中使用节流throttle相关推荐

最新文章

热门文章