当前位置：首页 > JavaScript

js 实现线程

2026-03-14 18:29:37JavaScript

JavaScript 是单线程语言，但可以通过以下方式模拟多线程或实现并发操作：

Web Workers

Web Workers 允许在后台运行脚本，独立于主线程执行。创建一个新的 Worker 实例：

js 实现线程

// main.js
const worker = new Worker('worker.js');
worker.postMessage('Hello Worker');

worker.onmessage = function(event) {
  console.log('Message from worker:', event.data);
};

// worker.js
self.onmessage = function(event) {
  console.log('Message from main:', event.data);
  self.postMessage('Hello Main');
};

SharedArrayBuffer 和 Atomics

共享内存允许 Worker 之间共享数据：

// main.js
const sharedBuffer = new SharedArrayBuffer(16);
const sharedArray = new Int32Array(sharedBuffer);

const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });

Atomics.store(sharedArray, 0, 42);

// worker.js
self.onmessage = function(event) {
  const sharedArray = new Int32Array(event.data.buffer);
  console.log(Atomics.load(sharedArray, 0)); // 42
};

Service Workers

用于离线缓存和网络代理：

js 实现线程

// main.js
navigator.serviceWorker.register('sw.js').then(registration => {
  console.log('ServiceWorker registered');
});

// sw.js
self.addEventListener('fetch', event => {
  event.respondWith(
    caches.match(event.request).then(response => {
      return response || fetch(event.request);
    })
  );
});

异步编程模式

使用 Promise 和 async/await 管理异步操作：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

定时器

setTimeout 和 setInterval 可用于任务调度：

setTimeout(() => {
  console.log('Delayed execution');
}, 1000);

const intervalId = setInterval(() => {
  console.log('Repeating execution');
}, 2000);

// Clear with clearInterval(intervalId)