异步操作以无限循环结束

描述

情况很混乱，我会尽力详细解释一下。

第 1 部分

首先，我创建一个创建者Promise函数AbortSignal：

/**
 * @template T
 * @param {(signal: AbortSignal, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} callback
 * @returns {Promise<T>}
 */
Promise.withSignal = async function (callback) {
    const controller = new AbortController();
    const { promise, resolve, reject } = Promise.withResolvers();
    try {
        callback(controller.signal, resolve, reject);
        return await promise;
    } finally {
        controller.abort();
    }
};

请注意，该函数保证完成后Promise，signal状态将为aborted.

第2部分

然后我创建一个异步确认：

const dialogConfirm = document.querySelector(`dialog.pop-up.confirm`);
dialogConfirm.addEventListener(`click`, (event) => {
    if (event.target === dialogConfirm) dialogConfirm.close();
});

/**
 * @returns {Promise<boolean>} 
 */
Window.prototype.confirmAsync = async function () {
    dialogConfirm.showModal();

    const buttonAccept = dialogConfirm.querySelector(`button.highlight`);
    const buttonDecline = dialogConfirm.querySelector(`button.invalid`);

    try {
        return await Promise.withSignal((signal, resolve, reject) => {
            buttonAccept.addEventListener(`click`, (event) => resolve(true), { signal });
            buttonDecline.addEventListener(`click`, (event) => resolve(false), { signal });
            dialogConfirm.addEventListener(`close`, (event) => resolve(false), { signal });
        });
    } finally {
        dialogConfirm.close();
    }
};

我们假设 HTML 附加到页面上

第三部分

下面我创建一个“生成”的类Promise：

/**
 * @template T
 */
class PromiseFactory {
    /**
     * @param {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} executor 
     */
    constructor(executor) {
        this.#executor = executor;
    }
    /** @type {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} */
    #executor;
    /**
     * @returns {Promise<T>}
     */
    async run() {
        const { promise, resolve, reject } = Promise.withResolvers();
        await this.#executor.call(promise, resolve, reject);
        return promise;
    }
    /**
     * @param {(value: T) => boolean} predicate 
     */
    async runUntil(predicate) {
        while (true) {
            try {
                const result = await this.run();
                if (!predicate(result)) continue;
                return result;
            } catch {
                continue;
            }
        }
    }
}

第 4 部分

最后我把它们放在一起：

/** @type {PromiseFactory<boolean>} */
const factory = new PromiseFactory(async (resolve) => resolve(await window.confirmAsync()));

factory.runUntil(result => {
    console.log(result);
    return result;
});

这个设计的重点是创造一些可以“重复”Promise直到达到预期结果的东西。好像这段代码到现在为止还应该打开对话框，直到您单击“接受”。

完整的工作示例：

/**
 * @template T
 * @param {(signal: AbortSignal, resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} callback
 * @returns {Promise<T>}
 */
Promise.withSignal = async function (callback) {
  const controller = new AbortController();
  const { promise, resolve, reject } = Promise.withResolvers();
  try {
    callback(controller.signal, resolve, reject);
    return await promise;
  } finally {
    controller.abort();
  }
};

const dialogConfirm = document.querySelector(`dialog.pop-up.confirm`);
dialogConfirm.addEventListener(`click`, (event) => {
  if (event.target === dialogConfirm) dialogConfirm.close();
});

/**
 * @returns {Promise<boolean>} 
 */
Window.prototype.confirmAsync = async function () {
  dialogConfirm.showModal();

  const buttonAccept = dialogConfirm.querySelector(`button.highlight`);
  const buttonDecline = dialogConfirm.querySelector(`button.invalid`);

  try {
    return await Promise.withSignal((signal, resolve, reject) => {
      buttonAccept.addEventListener(`click`, (event) => resolve(true), { signal });
      buttonDecline.addEventListener(`click`, (event) => resolve(false), { signal });
      dialogConfirm.addEventListener(`close`, (event) => resolve(false), { signal });
    });
  } finally {
    dialogConfirm.close();
  }
};

/**
 * @template T
 */
class PromiseFactory {
  /**
   * @param {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} executor 
   */
  constructor(executor) {
    this.#executor = executor;
  }
  /** @type {(resolve: (value: T | PromiseLike<T>) => void, reject: (reason?: any) => void) => void} */
  #executor;
  /**
   * @returns {Promise<T>}
   */
  async run() {
    const { promise, resolve, reject } = Promise.withResolvers();
    await this.#executor.call(promise, resolve, reject);
    return promise;
  }
  /**
   * @param {(value: T) => boolean} predicate 
   */
  async runUntil(predicate) {
    while (true) {
      try {
        const result = await this.run();
        if (!predicate(result)) continue;
        return result;
      } catch {
        continue;
      }
    }
  }
}

/** @type {PromiseFactory<boolean>} */
const factory = new PromiseFactory(async (resolve) => resolve(await window.confirmAsync()));

factory.runUntil(result => {
  console.log(result);
  return result;
});

<dialog class="pop-up confirm">
  <button class="highlight">Accept</button>
  <button class="invalid">Decline</button>
</dialog>

问题

问题是，如果按 Decline，就会开始无限循环，尽管程序是异步的并且不会冻结，但它仍然是错误的。
我只是不明白为什么我有一个无限循环。
我仍然不知道如何解决它。