当前位置：首页 > JavaScript

js同步实现

2026-04-05 05:51:45JavaScript

同步与异步的概念

JavaScript 默认是单线程且异步的，但可以通过特定方式模拟同步行为。同步代码会阻塞后续执行，直到当前任务完成；异步代码则通过回调、Promise 或 async/await 实现非阻塞。

阻塞式同步（不推荐）

通过循环或 while 阻塞线程，强制等待条件满足。例如：

function syncDelay(millis) {
  const start = Date.now();
  while (Date.now() - start < millis) {}
}
console.log("开始");
syncDelay(3000); // 阻塞3秒
console.log("结束");

缺点：会冻结整个页面，仅适用于特定场景（如测试）。

Promise 链实现同步流程

利用 Promise.then() 将异步操作串联为顺序执行：

js同步实现

function task1() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("任务1完成");
      resolve();
    }, 1000);
  });
}

function task2() {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log("任务2完成");
      resolve();
    }, 2000);
  });
}

task1().then(task2).then(() => console.log("全部完成"));

async/await 同步风格

async/await 是更直观的同步写法，底层仍基于 Promise：

async function runTasks() {
  await task1(); // 等待任务1完成
  await task2(); // 等待任务2完成
  console.log("全部完成");
}
runTasks();

优势：代码结构清晰，错误可通过 try/catch 捕获。

js同步实现

同步 AJAX 请求（已废弃）

早期 XMLHttpRequest 支持同步模式，但已被现代标准弃用：

const xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", false); // 同步标志
xhr.send();
console.log(xhr.responseText); // 直接获取结果

注意：此方法会导致页面卡顿，不推荐使用。

Web Workers 多线程同步

通过 postMessage 和 onmessage 在主线程与 Worker 间通信，模拟同步交互：

// 主线程
const worker = new Worker("worker.js");
worker.postMessage("start");
worker.onmessage = e => console.log(e.data);

// worker.js
self.onmessage = e => {
  const result = doHeavyTask(); // 耗时计算
  self.postMessage(result);
};