JavaScript 雷霆群从 CDN 加载外部库

Question

第一次使用pica()时，它将加载外部库。但是，如果在完成加载外部 JS 之前再次使用 pica()，则它不应再次加载库，因此 alert() 将运行。

let picaStatus = 0;

function pica(...args) {
  if (picaStatus == 1) { // library previously loaded
    pica.resizeCanvas(...args);
  } else if (picaStatus == 0) { // library hasn't been loaded
    picaStatus = -1;
    $.getScript("//cdnjs.cloudflare.com/ajax/libs/pica/2.0.4/pica.min.js", () => {
      picaStatus = 1;
      pica.resizeCanvas(...args);
    });
  } else if (picaStatus == -1) { // library is currently being loaded by another call
    alert('loading collision');
  }
}

如何让第二个函数调用等待库加载，而不是抛出 alert() 并删除函数调用？

Answer 1

使状态成为已加载脚本的 promise :

let picaStatus = null;

function pica(...args) {
  if (!picaStatus) { // library hasn't been loaded
    picaStatus = $.getScript("//cdnjs.cloudflare.com/ajax/libs/pica/2.0.4/pica.min.js");
  }
  picaStatus.then(() => {
    pica.resizeCanvas(...args);
  });
}