按钮点击回调的节流处理 ​

/**
 * 对函数进行节流处理（可以只传回调函数）
 * @param lazyMilliseconds [number] 延迟时间（单位：毫秒），可以不传
 * @param fn [function] 回调函数
 * @returns {(function(): Promise<void>)}
 */
const DEFAULT_LAZY_MILLISECONDS = 2000;
export const throttle = (lazyMilliseconds, fn) => {
  // 参数预处理
  if (typeof lazyMilliseconds === "function") {
    fn = lazyMilliseconds;
    lazyMilliseconds = DEFAULT_LAZY_MILLISECONDS;
  }
  lazyMilliseconds = lazyMilliseconds || DEFAULT_LAZY_MILLISECONDS;

  // 参数校验
  if (typeof fn !== "function") {
    throw new Error(
      `slow函数的入参fn应为函数，但是实际收到的是${typeof fn}类型的入参`,
    );
  }
  if (typeof lazyMilliseconds !== "number") {
    throw new Error(
      `slow函数的入参lazyMilliseconds应为数字，但是实际收到的是${typeof lazyMilliseconds}类型的入参`,
    );
  }

  let timer = null;
  const context = this;
  // 返回包装后的函数
  return async function () {
    if (timer) return;
    const returnVal = fn.apply(context, Array.from(arguments));

    // 如果返回值是Promise实例，在其还处于pending状态时不应该允许二次触发fn函数
    if (returnVal instanceof Promise) {
      timer = 1024; // 随便给个数字
      try {
        /**
         * 当promise结束且指定的等待时间已过，才允许下一次执行fn
         * 1、当lazyMilliseconds时间已到，但是promise的pending状态还未结束时，也禁止下一次执行fn
         */
        const timeoutPromise = new Promise((resolve) =>
          setTimeout(resolve, lazyMilliseconds),
        );
        // 当returnVal被reject时，或者returnVal和timeoutPromise都被resolve时，Promise.all的状态才会变成reject或者resolve
        await Promise.all([returnVal, timeoutPromise]);
      } finally {
        timer = null;
      }
      return;
    }

    // 如果返回值不是promise就正常按设定的延迟时间来
    timer = setTimeout(() => {
      if (timer) {
        clearTimeout(timer);
        timer = null;
      }
    }, lazyMilliseconds);
  };
};

Vue.prototype.$doConfirm = (params) => {
  let message;
  let title;
  let options;
  if (typeof params === "string") {
    message = params;
  } else {
    message = params.message;
    title = params.title;
    options = params.options;
  }
  return new Promise((resolve) => {
    Vue.prototype
      .$confirm(message, title === undefined ? "提示" : title, options || {})
      .then(() => resolve(true))
      .catch(() => resolve(false));
  });
};

{
    methods: {
        async confirmToDoSomething() {
            if (!(await this.$doConfirm('确定要这么做吗，老铁？'))) return;
            // 点击确定按钮之后的逻辑
            await IEatThis();
            await YouEatThat();
            await SpNothingForHim();
        },
    },
}

{
    methods: {
        async confirmToDoSomething() {
            if (!(await this.$doConfirm('确定要这么做吗，老铁？'))) return;
            // 点击确定按钮之后的逻辑
            this.yesIConfirmIWillDoThat();
        },
        yesIConfirmIWillDoThat: throttle(async function () {
            await IEatThis();
            await YouEatThat();
            await SpNothingForHim();
        }),
    },
}

/**
 * 处理传给本文件中其他方法的入参
 * 允许传类似这样的数据结构进来：'required'、{ required: true }、['required']、['required', { default: 0 }]
 * @param params {string|object|string[]|(string|object)[]}
 * @returns {object}
 */
const transformParams = (params = {}) => {
  if (!params) return {};
  if (typeof params === "string") {
    if (params === "required") return { required: true };
    throw new Error(`params参数${params}错误，请仔细检查`);
  }
  if (Array.isArray(params)) {
    return params.reduce((pre, cur) => {
      return { ...pre, ...transformParams(cur) };
    }, {});
  }
  if (typeof params === "object") return params;
  throw new Error(`params参数${params}错误，请仔细检查`);
};

const generateGetTypeFunc =
  (defaultOpt = {}) =>
  (additionalOpt = {}) => ({
    ...defaultOpt,
    ...transformParams(additionalOpt),
  });

export const getTypeBoolean = generateGetTypeFunc({
  type: Boolean,
  default: false,
});

export const getTypeString = generateGetTypeFunc({ type: String, default: "" });

export const getTypeArray = generateGetTypeFunc({
  type: Array,
  default: () => [],
});

export const getTypeNumber = generateGetTypeFunc({ type: Number, default: 0 });

export const getTypeObject = generateGetTypeFunc({
  type: Object,
  default: () => {},
});

export const getTypeArrayOrNull = generateGetTypeFunc({
  validator(value) {
    return Array.isArray(value) || value === null;
  },
  default: () => null,
});

export const getTypeStringOrArray = generateGetTypeFunc({
  validator(value) {
    return Array.isArray(value) || typeof value === "string";
  },
  default: () => "",
});