防抖，防止表单重复提交 vue js

util.js

export const debounce = function (func, wait, immediate) {
  var timer = null
  var result = null
  return function proxy () { // 保存的就是事件对象
    var params = [].slice.call(arguments)
    var self = this
    var callNow = !timer && immediate
    // 点一次点击都设置一次定时间，间隔WAIT这么久执行handle:
    if (timer) {
      clearTimeout(timer)
      timer = null
    }
    timer = setTimeout(function() {
      // 清楚最后一次
      clearTimeout(timer)
      timer = null
      if (!immediate) {
        result = func.apply(self, params)
      }
    }, wait)
    // 符合第一次立即执行[触发在开始的边界]
    if (callNow) {
      result = func.apply(self, params)
    }
    return result
  }
}

页面引入

import { debounce } from '@/utils/util'

<el-button  @click="submit" class="submit-btn" type="danger" size="small">确认提交</el-button>

methods: {
  submit: debounce( function () {
  // 业务代码
  } , 800, true)
}