JavaScript 中怎么用 AbortController 终止全屏 API 切换请求-js教程-PHP中文网

abortcontroller 无法终止全屏 api，因其 requestfullscreen() 和 exitfullscreen() 是同步方法，不返回 promise、不接受 signal 参数，且失败时直接抛出 domexception；它仅适用于中止 fetch 等基于 promise 的异步操作。

javascript 中怎么用 abortcontroller 终止全屏 api 切换请求

AbortController 不能直接终止全屏 API（requestFullscreen() 或 exitFullscreen()）的执行，因为这些方法是同步的、不返回 Promise，也不接受 signal 参数。全屏切换本身没有“可取消的异步请求”这一概念——它要么立即成功，要么立即抛出错误（如用户拒绝、策略限制等）。

为什么 AbortController 对全屏 API 无效

AbortController 的核心用途是中止 基于 Promise 的异步操作，例如：fetch()、setTimeout() 封装、stream.read() 等。而：

element.requestFullscreen() 是同步调用，浏览器立刻尝试进入全屏，不等待、不可中断；
若失败（如被策略阻止），会同步抛出 DOMException，不会进入 pending 状态；
没有内置 signal 支持，传入 { signal } 会被忽略（API 不识别该参数）。

能用 AbortController 间接控制的场景

虽然不能终止全屏动作本身，但可以用于协调与全屏相关的配套异步逻辑，例如：延时回退、状态轮询、UI 动画、或清理后续副作用。常见做法：

Alibabacloud Sdk Client Initialization For Java

在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。

下载

在调用 requestFullscreen() 前创建 AbortController，并用其 signal 控制后续定时器或轮询；
若用户快速点击取消/退出，或页面导航离开，可中止等待全屏确认、隐藏加载态、停止监听 fullscreenchange 等；
避免“幽灵监听”或过期回调执行。

示例：带超时和可取消的全屏流程（含 UI 反馈）

function requestFullscreenWithTimeout(element, timeoutMs = 3000) {
  const controller = new AbortController();
  const { signal } = controller;

  // 启动超时自动清理
  const timeoutId = setTimeout(() => {
    controller.abort();
  }, timeoutMs);

  // 监听全屏状态变化（仅在 signal 未中止时响应）
  const onFullscreenChange = () => {
    if (document.fullscreenElement === element) {
      console.log("✅ 已进入全屏");
      cleanup();
    } else if (document.fullscreenElement === null && signal.aborted) {
      // 用户已主动退出，且我们已 abort → 忽略
      return;
    }
  };

  const cleanup = () => {
    clearTimeout(timeoutId);
    document.removeEventListener("fullscreenchange", onFullscreenChange, { signal });
  };

  // 添加监听（带 signal，中止时自动移除）
  document.addEventListener("fullscreenchange", onFullscreenChange, { signal });

  try {
    element.requestFullscreen(); // 同步发起，不可取消
  } catch (err) {
    cleanup();
    throw err; // 如 PermissionDeniedError
  }

  // 返回控制器，供外部手动中止（例如用户点“取消”按钮）
  return controller;
}

// 使用示例
const btn = document.getElementById("fs-btn");
let fsController = null;

btn.addEventListener("click", () => {
  if (fsController) fsController.abort(); // 中止上一次流程

  fsController = requestFullscreenWithTimeout(document.documentElement);
  
  // 外部可随时取消（比如弹窗里点了“算了”）
  document.getElementById("cancel-btn").addEventListener("click", () => {
    fsController?.abort();
  });
});