JavaScript 中怎么在 Web Worker 内使用定时器与网络请求-js教程-PHP中文网

web worker 中可正常使用 settimeout、setinterval 和 fetch，但不支持 xmlhttprequest 和 dom 相关 api；定时器回调运行在 worker 线程，无法操作 dom；fetch 支持 abortcontroller 和 credentials，但不能读取 document.cookie。

javascript 中怎么在 web worker 内使用定时器与网络请求

Web Worker 中可以正常使用 setTimeout、setInterval 和 fetch，但不能用 XMLHttpRequest（旧式写法）或依赖 DOM 的 API（比如 document、window.location）。关键在于 Worker 是独立线程，没有浏览器主线程的全局对象。

定时器在 Worker 中完全可用

Worker 全局作用域提供了 self.setTimeout 和 self.setInterval（self 指向 WorkerGlobalScope），用法和主线程一致：

直接写 setTimeout 或 setInterval 即可，无需加 self.（语法糖支持）
清除定时器用 clearTimeout / clearInterval
注意：回调函数运行在 Worker 线程，无法访问 DOM，也不能直接修改页面元素

示例：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

worker.js

let count = 0;
const timer = setInterval(() => {
  count++;
  // 发送消息给主线程更新 UI
  self.postMessage({ type: 'tick', value: count });
  if (count >= 5) clearInterval(timer);
}, 1000);

网络请求推荐用 `fetch`，不支持 `XMLHttpRequest`

现代 Worker 支持 fetch（包括 Request、Response、AbortController），但不支持 XMLHttpRequest（会报 ReferenceError: XMLHttpRequest is not defined）：

fetch 返回 Promise，可在 Worker 中 await（需用 async function 或 .then()）
可配合 AbortController 实现超时或取消（主线程传 signal 不行，需在 Worker 内创建）
不能读取 cookies（除非服务端显式设置 credentials: 'include' 且响应头允许）

示例：

worker.js

self.addEventListener('message', async (e) => {
  const { url } = e.data;
  try {
    const controller = new AbortController();
    const timeoutId = setTimeout(() => controller.abort(), 5000);

    const res = await fetch(url, {
      method: 'GET',
      signal: controller.signal,
      credentials: 'same-origin' // 或 'include'
    });
    clearTimeout(timeoutId);

    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    self.postMessage({ type: 'success', data });
  } catch (err) {
    self.postMessage({ type: 'error', message: err.message });
  }
});

注意事项与常见坑

location、navigator、localStorage 等部分 API 在 Worker 中不可用或受限（如 navigator.onLine 可用，localStorage 不可用）
Worker 内不能使用 document.cookie，但可通过 fetch(credentials: 'include') 自动携带同源 cookie
主线程向 Worker 传参只能通过 postMessage（结构化克隆算法），不能传函数、DOM 节点或 Promise
若需轮询接口，建议用 setTimeout 递归代替 setInterval，便于根据响应结果动态调整间隔