Web Locks API通过命名锁协调同源多上下文对共享资源的访问，防止竞态条件。使用navigator.locks.request('name', callback)获取独占或共享锁，确保操作原子性；支持超时和ifAvailable配置避免阻塞；通过navigator.locks.query()监控锁状态，适用于PWA和Worker协作场景。
JavaScript的Web Locks API提供了一种机制，用于在同一个origin下的多个执行上下文（如页面、Worker）之间协调对共享资源的访问。它能防止竞态条件，确保同一时间只有一个上下文可以操作特定资源。
当多个脚本或Worker尝试同时修改同一数据（如IndexedDB记录、localStorage或内存状态）时，容易出现不一致问题。Web Locks API通过请求命名锁来实现同步控制。
锁是可重入的，并且作用于整个浏览器上下文组（如同源的Window和Worker）。一旦获得锁，其他请求必须等待，直到锁被释放。
核心是navigator.locks.request()方法，它接受锁名、可选选项和回调函数。
立即学习“Java免费学习笔记（深入）”；
示例：保护对全局变量的写入
let sharedData = null;
async function writeData(value) {
await navigator.locks.request('data-store', async (lock) => {
// 获得锁后执行
sharedData = value;
console.log('数据已更新:', value);
// 回调结束自动释放锁
});
}
可通过配置对象设置超时或共享模式。例如，设置5秒超时避免无限等待：
await navigator.locks.request('data-store', { mode: 'exclusive', ifAvailable: false, timeout: 5000 }, async (lock) => {
if (!lock) {
console.warn('未能在规定时间内获取锁');
return;
}
// 执行受保护的操作
});
mode 可设为 'exclusive'（默认，独占）或 'shared'（共享，允许多个共享锁同时存在，但不能与独占锁共存）。
ifAvailable 设为true时，若锁已被占用则立即返回失败，不会等待。
可用navigator.locks.query()获取当前锁的状态，有助于调试：
const state = await navigator.locks.query(); console.log(state.held); // 当前持有的锁 console.log(state.pending); // 等待中的锁请求
返回的对象显示哪些锁正在被持有或排队，帮助识别潜在死锁或性能瓶颈。
基本上就这些。合理使用Web Locks API能有效管理跨上下文资源访问，尤其适用于复杂PWA或多Worker协作场景。以上就是如何利用JavaScript的Web Locks API管理资源锁？的详细内容，更多请关注php中文网其它相关文章！
每个人都需要一台速度更快、更稳定的 PC。随着时间的推移，垃圾文件、旧注册表数据和不必要的后台进程会占用资源并降低性能。幸运的是，许多工具可以让 Windows 保持平稳运行。
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
718
收藏
