JavaScript实现锁-优快云博客

本文链接：https://blog.youkuaiyun.com/RisenMyth/article/details/110237699

为了解决uniapp中onReady与onLoad执行顺序不确定的问题，本文介绍了一种使用Promise实现锁的方法，确保onLoad完成后onReady再执行，通过自定义Lock类实现了这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题描述：

最近，在uniapp上实现一个页面功能，需要在onReady之后获取canvasContext进行绘制，但是里面用到的一些参数，需要在onLoad上进行传参拿到，由于不同的手机，渲染速度不同，因此导致 onReady 与 onLoad 的执行先后顺序不确定，从而影响到后面的功能操作。

解决方案：

在后端，我们会想到直接使用锁来解决这个问题。但在JavaScript里面，是没有多线程的，因此也就不存在锁。在这里，我使用Promise实现锁。

Lock.js

export default class Lock {
  constructor() {
    this.flag = false;
    this.data = {}; // 这个data可以根据业务需要保留或移除，是用于传递值的。
  }

  wait() { // 等待锁
    return new Promise(resolve => {
      if (this.flag) {
        resolve(this.data);
      } else {
        this.resolve = resolve;
      }
    });
  }

  notify(data = {}) { // 通知锁
    this.data = data;
    this.flag = true;
    this.resolve && this.resolve(this.data);
  }
}

使用如下：

export default {
  data() {
    lock: new Lock()
  },
  onLoad(e) {
    // 这里进行参数处理等业务
    this.lock.notify(); // 通知对方当前参数已经初始化完成了
  },
  async onReady() {
    // 这里做一些页面元素的一些初始化操作，例如获取canvasContext等等
    await this.lock.wait(); // 等待onLoad参数执行完毕
    // 这里可以继续往下处理后面的业务了
  }
}