vue项目中使用节流throttle

问题描述

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

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

解决方案：

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

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

//节流
export function throttle(fn, time) {
  let timer = null
  time = time || 1000
  return function (...args) {
    if (timer) {
      return
    }
    const _this = this
    timer = 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),
}

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