表单提交防抖函数

防抖函数的封装及使用（表单提交）

一般表单提交不推荐用防抖，真的想用有以下的方法(表单重复提交的解决方案放在下一篇文章中

场景和定义：
    防抖：当进行某个操作的时候，为防止暴力点击，造成短时间内多次触发事件，需要进行防抖操作（即在一定的时间内，只能对事件进行一
次操作，且在一定的时间内只有第一次生效。例如：在滚动事件和鼠标移动事件中，可能移动或者滚动很少的距离，函数也会触发很多次给系统造成压力
    以下是操作方法的步骤，和详细代码：

操作步骤：
1、在src/utils/index.js中增加防抖函数

/**
 * 防抖
 */
export const Debounce = (fn, t) => {
  let delay = t || 500;
  let timer;
  return function() {
    let args = arguments;
    if (timer) {
      clearTimeout(timer);
    }

    let callNow = !timer;

    timer = setTimeout(() => {
      timer = null;
    }, delay);

    if (callNow) fn.apply(this, args);
  };
};

2、在需要的页面中引入

import { Debounce } from '@/utils/index.js';

3、点击提交（或者确定）时，在methods中的提交函数中这样写

// 下面的submit也可根据需要改为点击提交（或者确认）时触发的函数名
//下面的1000可根据需要，修改为你需要在多久之后才能第二次触发
    submit: Debounce(function() { 
      你需要执行的操作
    }, 1000)

下面是我写过的，仅供参考

    <div slot="footer" class="dialog-footer">
          <el-button @click="cancel">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
    </div>

//引入

    import { Debounce } from '@/utils/index.js';

//使用

    /** 提交按钮 */
    submitForm: Debounce(function () {
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != undefined) {
            edit(this.form).then((response) => {
              this.$modal.msgSuccess('修改成功');
              this.open = false;
              this.getList();
            });
          } else {
            add(this.form).then((response) => {
              this.$modal.msgSuccess('新增成功');
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },1000),