JavaScript异步延迟控制技巧

本文深入解析了JavaScript中实现精确、可靠异步延迟的正确方法，特别针对无DOM环境（如AppleScript调用的JavaScriptCore）中常见的`wait is not defined`和`Unexpected token 'new'`等报错问题，手把手教你用`async/await`结合`Promise`与`setTimeout`封装安全可用的`sleep()`函数，并通过完整可运行的自动化示例（如日期处理与表单交互序列）演示如何避免忙等待、确保执行顺序、兼容老旧环境，同时强调`async`声明、`await`作用域、错误兜底等关键实践——掌握它，你就能写出不卡顿、易调试、真可控的JavaScript延时逻辑。

本文详解如何在 JavaScript（尤其是无 DOM 环境如 AppleScript 调用的网页脚本）中正确实现可等待的延迟，解决 wait is not defined 和 new unexpected 等常见错误，并提供可直接运行的 async/await + Promise 延迟方案。

本文详解如何在 JavaScript（尤其是无 DOM 环境如 AppleScript 调用的网页脚本）中正确实现可等待的延迟，解决 `wait is not defined` 和 `new unexpected` 等常见错误，并提供可直接运行的 `async/await` + `Promise` 延迟方案。

JavaScript 本身不提供原生的同步阻塞式 sleep() 或 wait() 函数（如 Python 的 time.sleep()），因此直接调用 wait(3000) 会报错 ReferenceError: wait is not defined。而使用 await new Promise(...) 时若报错 Unexpected token 'new'，通常是因为当前执行上下文不支持 await —— 这意味着你正尝试在非 async 函数内使用 await，或运行环境（如旧版 Safari、某些自动化脚本引擎）对 ES2017+ 语法支持不完整。

✅ 正确做法是：封装一个返回 Promise 的 sleep() 工具函数，并确保所有依赖延迟的逻辑都运行在 async 函数中，通过 await 顺序执行。

以下是经过验证、兼容主流浏览器及 AppleScript + JavaScriptCore 场景的完整实现：

// ✅ 安全可靠的延迟函数：返回 Promise，可被 await
const sleep = (ms) => new Promise(resolve => setTimeout(resolve, ms));

// ✅ inputPunch 必须声明为 async，才能使用 await
async function inputPunch(date_string) {
  // ✅ 任务 1（例如：填充表单、点击按钮）
  console.log(`[Task 1] Processing date: ${date_string}`);

  await sleep(3000); // ⏳ 精确等待 3 秒，不阻塞主线程

  // ✅ 任务 2（例如：等待页面加载、触发 AJAX）
  console.log("[Task 2] Waiting for UI response...");

  await sleep(3000);

  // ✅ 任务 3（例如：滚动到元素、二次确认）
  console.log("[Task 3] Finalizing interaction...");

  await sleep(3000);

  // ✅ 最终任务（例如：提交、记录日志）
  console.log("[Done] inputPunch completed for", date_string);
}

// ✅ 主流程也必须是 async，以支持循环内逐次 await
async function runScrapingSequence() {
  // 初始化日期（示例中 start_date_value 需提前定义）
  let date_obj = new Date(start_date_value);
  date_obj.setDate(date_obj.getDate() + 2);

  for (let i = 0; i < 12; i++) {
    const cur_date_string = date_obj.toDateString();
    const cur_date_array = cur_date_string.split(" ");

    // 清理日期中的前导零（如 "05" → "5"），正则已修正为更健壮写法
    cur_date_array[2] = cur_date_array[2].replace(/^0+(\d)/, '$1'); // 仅处理开头零

    const cur_formatted_date_string = `${cur_date_array[1]} ${cur_date_array[2]}, ${cur_date_array[3]}`;
    console.log("? Formatted date:", cur_formatted_date_string);

    // ✅ 关键：await 确保本次 inputPunch 完全结束，才进入下一轮循环
    await inputPunch(cur_formatted_date_string);

    date_obj.setDate(date_obj.getDate() + 1);
  }
}

// ✅ 启动入口：立即调用 async 主函数
runScrapingSequence().catch(err => {
  console.error("❌ Script execution failed:", err);
});

? 关键注意事项：

• await 只能在 async 函数内使用：inputPunch 和主循环容器（如 runScrapingSequence）都必须显式声明为 async；
• 避免顶层 await（部分环境不支持）：AppleScript 调用 JS 时，推荐将全部逻辑包裹在自调用 async 函数中（如上例），而非直接在全局作用域写 await；
• setTimeout 是唯一可靠基础：不要尝试 while(Date.now() < ...) 等忙等待——它会阻塞线程、导致页面卡死且无法被 await 捕获；
• 正则表达式修复说明：原答案中 /^0+(\d)|(\d)0+$/gm 存在歧义和冗余；实际只需 /^0+(\d)/ 即可安全移除日期日份前导零（如 "05" → "5"），避免误替换末尾零；
• 错误兜底必不可少：用 .catch() 捕获未处理的 Promise 拒绝，便于调试 AppleScript 中 JS 执行失败原因。

? 总结：JavaScript 的“延迟”本质是基于事件循环的异步等待，核心范式是 Promise + setTimeout + async/await。只要确保函数层级正确标记 async、调用处正确使用 await，即可实现清晰、可控、非阻塞的序列化操作——这对 Web 自动化、爬虫模拟、UI 测试等场景至关重要。

到这里，我们也就讲完了《JavaScript异步延迟控制技巧》的内容了。个人认为，基础知识的学习和巩固，是为了更好的将其运用到项目中，欢迎关注golang学习网公众号，带你了解更多关于的知识点！