使用TypeScript实现高效的异步队列任务管理

export type NextFunction = (nextArgs?: any) => void;

export type AsyncCallback = (
  next: NextFunction,
  params: any,
  args: any
) => void;

interface AsyncTask {
  /**
   * 任务uuid
   */
  uuid: number;
  /**
   * 任务开始执行的回调
   * params: push时传入的参数
   * args: 上个任务传来的参数
   */
  callbacks: Array<AsyncCallback>;
  /**
   * 任务参数
   */
  params: any;
}

export class AsyncQueue {
  private _runningAsyncTask: AsyncTask | null = null;
  private static _$uuid_count: number = 1;
  private _queues: Array<AsyncTask> = [];

  public get queues (): Array<AsyncTask> {
    return this._queues;
  }

  private _isProcessingTaskUUID: number = 0;

  private _enable: boolean = true;
  
   /**
   * 任务队列完成回调
   */
  public complete: Function | null = null;

  constructor() {}

  // 方法的具体实现将在后面提供
}

/**
   * push一个异步任务到队列中
   * 返回任务uuid
   */
  public push (callback: AsyncCallback, params: any = null): number {
    const uuid = AsyncQueue._$uuid_count++;
    this._queues.push({
      uuid: uuid,
      callbacks: [callback],
      params: params
    });
    return uuid;
  }

  /**
   * push多个任务，多个任务函数会同时执行,
   * 返回任务uuid
   */
  public pushMulti (params: any, ...callbacks: AsyncCallback[]): number {
    const uuid = AsyncQueue._$uuid_count++;
    this._queues.push({
      uuid: uuid,
      callbacks: callbacks,
      params: params
    });
    return uuid;
  }

  /** 移除一个还未执行的异步任务 */
  public remove (uuid: number) {
    if (this._runningAsyncTask?.uuid === uuid) {
      console.warn("A running task cannot be removed");
      return;
    }
    for (let i = 0; i < this._queues.length; i++) {
      if (this._queues[i].uuid === uuid) {
        this._queues.splice(i, 1);
        break;
      }
    }
  }  

  /**
   * 清空队列
   */
  public clear () {
    this._queues = [];
    this._isProcessingTaskUUID = 0;
    this._runningAsyncTask = null;
  }
  
  /**
   * 是否有正在处理的任务
   */
  public get isProcessing (): boolean {
    return this._isProcessingTaskUUID > 0;
  }

  /**
   * 开始运行队列
   */
  public play (args: any = null) {
    if (this.isProcessing) {
      return;
    }

    if (!this._enable) {
      return;
    }

    const actionData: AsyncTask = this._queues.shift()!;
    if (actionData) {
      this._runningAsyncTask = actionData;
      const taskUUID: number = actionData.uuid;
      this._isProcessingTaskUUID = taskUUID;
      const callbacks: Array<AsyncCallback> = actionData.callbacks;

      if (callbacks.length === 1) {
        const nextFunc: NextFunction = (nextArgs: any = null) => {
          this.next(taskUUID, nextArgs);
        };
        callbacks[0](nextFunc, actionData.params, args);
      } else {
        // 多个任务函数同时执行
        let fnum: number = callbacks.length;
        const nextArgsArr: any[] = [];
        const nextFunc: NextFunction = (nextArgs: any = null) => {
          --fnum;
          nextArgsArr.push(nextArgs || null);
          if (fnum === 0) {
            this.next(taskUUID, nextArgsArr);
          }
        };
        const knum = fnum;
        for (let i = 0; i < knum; i++) {
          callbacks[i](nextFunc, actionData.params, args);
        }
      }
    } else {
      this._isProcessingTaskUUID = 0;
      this._runningAsyncTask = null;
      // console.log("任务完成")
      if (this.complete) {
        this.complete(args);
      }
    }
  }

protected next(taskUUID: number, args: any = null) {
    if (this._isProcessingTaskUUID === taskUUID) {
        this._isProcessingTaskUUID = 0;
        this._runningAsyncTask = null;
        this.play(args);
    }
}

const queue = new AsyncQueue();

queue.push((next, params) => {
  console.log("执行任务 1");
  // 模拟异步操作
  setTimeout(() => {
    console.log("任务 1 完成");
    next();
  }, 1000);
});

queue.push((next, params) => {
  console.log("执行任务 2");
  setTimeout(() => {
    console.log("任务 2 完成");
    next();
  }, 1000);
});

queue.complete = () => console.log("所有任务执行完毕");

queue.play();