JavaScript Promise 本身无法实现跨标签页互斥锁，需借助 localStorage + storage 事件模拟分布式锁，配合 Promise 封装加锁/解锁逻辑；增强版可引入租约机制防死锁，生产环境推荐 BroadcastChannel 或 SharedWorker。
在多标签页环境下，JavaScript 的 Promise 本身无法直接实现跨页面的互斥锁，因为每个标签页拥有独立的 JavaScript 执行上下文和内存空间。要实现“多页面标签页之间同步执行的互斥锁”，核心在于引入共享状态存储（如 localStorage 或 IndexedDB）配合事件监听（storage 事件），再用 Promise 封装加锁/解锁逻辑，使其具备异步、可等待、可取消（可选）的语义。
原理：用 localStorage + storage 事件模拟分布式锁
多个标签页可以读写同一域名下的 localStorage，且当一个标签页修改它时，其他同源标签页会触发 storage 事件。我们可以利用这个特性：
- 定义一个全局唯一的锁键（如
"__mutex_lock"） - 尝试写入该 key 的值为当前 tab 的唯一标识（如
Date.now() + Math.random()） - 通过轮询或监听 storage 事件，判断自己是否成功“抢占”了锁（即写入后未被其他 tab 覆盖）
- 持有锁的 tab 执行业务逻辑，完成后主动清除锁
- 其他 tab 等待锁释放（通过 Promise resolve 实现“等待”语义）
基础实现：简单可重入的单锁 Promise 封装
以下是一个轻量、无依赖的实现（不支持超时/中断，适合简单场景）：
class TabMutex {
constructor(lockKey = '__tab_mutex_lock') {
this.lockKey = lockKey;
}
acquire() {
const id = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
return new Promise((resolve, reject) => {
const tryLock = () => {
try {
const current = localStorage.getItem(this.lockKey);
if (!current) {
// 尝试抢占：仅当没被占用时才写入
localStorage.setItem(this.lockKey, id);
const confirmed = localStorage.getItem(this.lockKey) === id;
if (confirmed) {
resolve({
release: () => {
if (localStorage.getItem(this.lockKey) === id) {
localStorage.removeItem(this.lockKey);
}
}
});
return;
}
}
// 被抢占了，继续等待
} catch (e) {
// 可能是 Safari 无痕模式等禁用 localStorage
reject(new Error('localStorage unavailable'));
return;
}
// 监听 storage 事件，一旦锁被释放就重试
const onStorage = (e) => {
if (e.key === this.lockKey && e.newValue === null) {
// 锁已释放，立即重试
tryLock();
}
};
window.addEventListener('storage', onStorage, { once: true });
};
tryLock();
});
}
}
// 使用示例：
const mutex = new TabMutex();
async function doCriticalWork() {
const lock = await mutex.acquire();
try {
console.log('✅ 已获得跨标签页锁，开始执行');
await someAsyncTask(); // 你的业务逻辑
} finally {
lock.release();
console.log('? 锁已释放');
}
}
增强健壮性：处理异常退出与死锁风险
真实场景中，用户可能直接关闭标签页、刷新、崩溃，导致锁长期滞留。可加入租约（lease）机制：
立即学习“Java免费学习笔记（深入）”；
- 写入锁时同时记录时间戳：
JSON.stringify({ id, expires: Date.now() + 30_000 }) - 每次尝试加锁前，先检查现有锁是否过期（避免“僵尸锁”）
- 加锁成功后，启动定时器定期刷新锁的过期时间（心跳）
- 释放锁时清除定时器
这样即使某个 tab 异常退出，锁也会在 30 秒后自动失效，其他 tab 可接管。
替代方案：更可靠的跨页通信（推荐生产环境）
localStorage + storage 事件有局限性（如 Safari 无痕模式禁用、事件延迟、无法传递复杂数据）。更健壮的方式是：
- BroadcastChannel API：现代浏览器支持，专为跨 tab 通信设计，支持 postMessage，比 storage 更及时、更可控（但不兼容 IE 和旧 Safari）
- SharedWorker：所有同源 tab 共享一个 Worker，由它统一管理锁状态，通信更稳定（需额外部署 worker 文件）
- 服务端协调：通过 WebSocket 或短轮询向服务端申请锁，适合需要强一致性或跨域协同的场景
若只需兼容性优先，localStorage 方案仍是最简可行解；若追求可靠性与响应速度，优先选用 BroadcastChannel。
