js 同步实现

同步与异步的概念

JavaScript 默认是单线程且异步的，但可以通过特定方式实现同步风格的代码。同步代码会阻塞后续执行，直到当前操作完成。

回调函数实现同步

通过嵌套回调强制代码按顺序执行，但会导致“回调地狱”。

function task1(callback) {
  console.log("Task 1");
  callback();
}

function task2() {
  console.log("Task 2");
}

task1(task2); // 输出顺序: Task 1 → Task 2

Promise 链式调用

使用 Promise.then() 实现同步流程，避免回调嵌套。

function asyncTask() {
  return new Promise((resolve) => {
    setTimeout(() => {
      console.log("Async Task");
      resolve();
    }, 1000);
  });
}

asyncTask()
  .then(() => console.log("Next Step"));

async/await 语法

通过 async/await 以同步写法处理异步操作，需在函数前标记 async，并用 await 等待 Promise 完成。

async function runTasks() {
  await asyncTask(); // 等待异步任务完成
  console.log("After Async Task");
}

runTasks();

同步阻塞示例（不推荐）

使用 while 循环或 Date 强制阻塞主线程，但会冻结页面。

function syncDelay(ms) {
  const start = Date.now();
  while (Date.now() - start < ms) {}
  console.log("Delay Complete");
}

syncDelay(2000); // 阻塞2秒

注意事项

• 避免在主线程中使用同步阻塞，影响用户体验。
• 优先选择 async/await 或 Promise 链式调用实现逻辑同步。
• 浏览器环境中，同步 XMLHttpRequest 已被弃用，推荐使用 fetch 或 axios 的异步方式。