技術標籤：vue

表單提交時防止多次點選操作

場景：
之前專案存在的一個bug，提交表單時，雙擊提交按鈕，會調兩次介面，第一次失敗，第二次成功。

防抖：
策略是當事件被觸發時，設定一個週期延遲執行動作，若期間又被觸發，則重新設定週期，直到週期結束，執行動作。 這是debounce的基本思想，在後期又擴充套件了前緣debounce，即執行動作在前，然後設定週期，週期內有事件被觸發，不執行動作，且週期重新設定。

使用方法：

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. 表單提交時使用

// 提交
    submit: Debounce(function() {
      你需要執行的操作
    }, 1000)

以上，實現防抖，即可以防止表單重複提交~~~