当前位置:首页 > JavaScript

js实现锁

2026-04-05 11:20:17JavaScript

实现互斥锁(Mutex)

在JavaScript中实现锁机制可以通过Promise和异步控制实现。以下是一个基于Promise的互斥锁实现:

class Mutex {
  constructor() {
    this._locked = false;
    this._queue = [];
  }

  lock() {
    return new Promise((resolve) => {
      if (!this._locked) {
        this._locked = true;
        resolve();
      } else {
        this._queue.push(resolve);
      }
    });
  }

  unlock() {
    if (this._queue.length > 0) {
      const nextResolve = this._queue.shift();
      nextResolve();
    } else {
      this._locked = false;
    }
  }
}

使用示例:

const mutex = new Mutex();

async function criticalSection() {
  await mutex.lock();
  try {
    // 临界区代码
  } finally {
    mutex.unlock();
  }
}

读写锁实现

对于读写分离场景,可以实现读写锁:

class ReadWriteLock {
  constructor() {
    this._readers = 0;
    this._writers = 0;
    this._writeQueue = [];
    this._readQueue = [];
  }

  async readLock() {
    return new Promise((resolve) => {
      if (this._writers === 0 && this._writeQueue.length === 0) {
        this._readers++;
        resolve();
      } else {
        this._readQueue.push(resolve);
      }
    });
  }

  async writeLock() {
    return new Promise((resolve) => {
      if (this._readers === 0 && this._writers === 0) {
        this._writers++;
        resolve();
      } else {
        this._writeQueue.push(resolve);
      }
    });
  }

  readUnlock() {
    this._readers--;
    if (this._readers === 0 && this._writeQueue.length > 0) {
      const nextResolve = this._writeQueue.shift();
      this._writers++;
      nextResolve();
    }
  }

  writeUnlock() {
    this._writers--;
    if (this._readQueue.length > 0) {
      while (this._readQueue.length > 0) {
        const nextResolve = this._readQueue.shift();
        this._readers++;
        nextResolve();
      }
    } else if (this._writeQueue.length > 0) {
      const nextResolve = this._writeQueue.shift();
      this._writers++;
      nextResolve();
    }
  }
}

基于SharedArrayBuffer的原子锁

在支持SharedArrayBuffer的环境中,可以使用Atomics API实现真正的原子锁:

// 必须在跨上下文环境(如Web Worker)中才能使用
const lockBuffer = new SharedArrayBuffer(4);
const lock = new Int32Array(lockBuffer);

function acquireLock() {
  while (true) {
    // 尝试获取锁
    const oldValue = Atomics.compareExchange(lock, 0, 0, 1);
    if (oldValue === 0) {
      return; // 成功获取锁
    }
    // 等待锁释放
    Atomics.wait(lock, 0, 1);
  }
}

function releaseLock() {
  // 释放锁
  Atomics.store(lock, 0, 0);
  // 唤醒一个等待的线程
  Atomics.notify(lock, 0, 1);
}

使用async-mutex库

对于生产环境,推荐使用成熟的第三方库如async-mutex

js实现锁

import { Mutex } from 'async-mutex';

const mutex = new Mutex();

async function criticalSection() {
  const release = await mutex.acquire();
  try {
    // 临界区代码
  } finally {
    release();
  }
}

这些实现方法各有适用场景,互斥锁适合简单同步需求,读写锁适合读多写少场景,原子锁适合真正的多线程环境,而第三方库则提供了更完善的解决方案。

标签: js
分享给朋友:

相关文章

js实现倒计时

js实现倒计时

实现倒计时的基本方法 使用 JavaScript 实现倒计时功能可以通过 setInterval 或 setTimeout 结合日期计算来完成。以下是几种常见的实现方式: 使用 setInterva…

js实现拖拽

js实现拖拽

实现拖拽的基本步骤 通过监听鼠标事件(mousedown、mousemove、mouseup)实现拖拽功能。以下是核心代码逻辑: const draggableElement = document.…

js实现全选

js实现全选

实现全选功能的方法 在JavaScript中实现全选功能通常涉及监听全选复选框的点击事件,并根据其状态控制其他复选框的选中状态。以下是几种常见的实现方式: 基础DOM操作实现 通过获取所有目标复选框…

js jquery

js jquery

jQuery 简介 jQuery 是一个快速、简洁的 JavaScript 库,简化了 HTML 文档遍历、事件处理、动画设计和 Ajax 交互。它兼容多种浏览器,提供易于使用的 API,使开发者能够…

js实现导航菜单

js实现导航菜单

使用HTML和CSS创建基础结构 导航菜单的基础结构通常由HTML的无序列表(<ul>)和列表项(<li>)组成,每个列表项包含一个链接(<a>)。CSS用于样式化…

js实现div隐藏

js实现div隐藏

使用CSS的display属性隐藏div 通过设置元素的display属性为none,可以完全隐藏div元素。这种方法不仅隐藏元素,还会从文档流中移除,不占据页面空间。 document.getEl…