JS闭包实现点击事件里的异步请求结束后才能继续点击

一、封装核心

使用闭包，闭包内定义一个状态值判断请求是否可以结束下一次点击。调用方式有两种：

1. 需要在点击事件内调用回调方法后才能点击下一次。
2. 需要在点击事件里返回一个Promise，Promise结束后才能点击下一次。

二、代码实现

第一种：需要在点击事件内调用回调方法后才能点击下一次。

// typescript
type TWaitStatus = 0 | 1;

export function _waitCallback(fn: () => any) {
  let waitStatus: TWaitStatus = 0;
  return function (...args) {
    if (waitStatus === 1) return;
    waitStatus = 1;
    fn.apply(this, [
      () => {
        waitStatus = 0;
      },
      ...args,
    ]);
  };
}

调用方式

methods: {
    handleClick: _waitCallback(function (callback) {
      this.testPromise().then(() => {
        callback();
      });
    }),
}

第二种：需要在点击事件里返回一个Promise，Promise结束后才能点击下一次。

// typescript
type TWaitStatus = 0 | 1;

export function _waitPromise(fn: () => Promise<any>) {
  let waitStatus: TWaitStatus = 0;
  return function (...args) {
    if (waitStatus === 1) return;
    waitStatus = 1;
    const value = fn.apply(this, args);
    if (!value || typeof value.then !== 'function') return;
    value.finally(() => {
      waitStatus = 0;
    });
  };
}

调用方式

methods: {
    handleClick: _waitPromise(function () {
      return this.testPromise();
    }),
}