在腳本標簽中使用 Promise 不起作用？

Question

我下面的代碼用於使用承諾在 DOM 中附加腳本。 （以下所有代碼都在 iframe 內執行，用於 A 幀技術，我的代碼是使用 Google Blockly[Block-based coding] 生成的）

 export const appendScript = async({ src, aframeWindow, code, id }, doc, callback, ) => new Promise(resolve => { const startDate = new Date(); const script = doc.createElement('script'); if (src) script.src = src; if (code) { script.text = code; } if (id) { script.id = id; } doc.head.appendChild(script); if (callback) callback(); if (code) { if (callback) { callback(); } console.log(aframeWindow.onGreenPlayButtonClicked, "===="); // undefined when code string contains await outside ongreenplaybuttonclicked fn resolve('resolved'); } else { script.addEventListener('load', () => { const endDate = new Date(); const seconds = (endDate.getTime() - startDate.getTime()) / 1000; console.log('script loaded: ', src, `took ${seconds} to load`); resolve('resolve2'); }); } });

下面的腳本是我調用 appendscript 的函數。

 const callAppendScript = async code => { const CODE_VERSION = aframeWindow.CODE_VERSION; code = ` async function main(inPlayMode) { let CURRENT_CODE_VERSION = CODE_VERSION; ${code}; } main(); `; let x = await appendScript({ code, aframeWindow, id: 'code' }, aframeWindow.document, ); } callAppendScript(code);

我的代碼字符串 1 生成：（不起作用）

 async function main(inPlayMode) { let CURRENT_CODE_VERSION = !inPlayMode ? 0 : window.CODE_VERSION; var greeting; greeting = await HatchTranslateEngine.translate(`Hello`, 'en'); //async window.onGreenPlayButtonClicked = async function onGreenPlayButtonClicked() { await MinecraftAvatar.speakSound(greeting, true) }; } main();

我的代碼字符串 2 生成：（有效）

 async function main(inPlayMode) { let CURRENT_CODE_VERSION = !inPlayMode ? 0 : window.CODE_VERSION; var greeting; greeting = Hatch.convert(`Hello`, 'jp'); //syncrhonous window.onGreenPlayButtonClicked = async function onGreenPlayButtonClicked() { await MinecraftAvatar.speakSound(greeting, true) }; } main();

我生成的代碼字符串 3：（仍然有效）

 async function main(inPlayMode) { let CURRENT_CODE_VERSION = !inPlayMode ? 0 : window.CODE_VERSION; var greeting; window.onGreenPlayButtonClicked = async function onGreenPlayButtonClicked() { greeting = await HatchTranslateEngine.translate(`Hello`, 'en'); //async this still works (inside playbtn) await MinecraftAvatar.speakSound(greeting, true) }; } main();

每當我點擊播放按鈕時， callAppendScript(code)就會被執行，當它這樣做時，

對於代碼字符串 1 ，它在aframeWindow.onGreenPlayButtonClicked給了我未定義（不正確）對於代碼字符串 2 ，它給了我在 aframeWindow.onGreenPlayButtonClicked中的aframeWindow.onGreenPlayButtonClicked函數簽名（正確）

那么，為什么它不適用於 case 1 ，我嘗試了所有方法但無法弄清楚。 我只發現對於 onGreenPlayButtonClicked 之外的任何await關鍵字，我都會得到aframeWindow.onGreenPlayButtonClicked ，它在appendScript函數內。

謝謝

Answer 1

appendScript沒有任何appendScript等待main()調用返回的承諾。 如果您異步初始化onGreenPlayButtonClicked ，則在附加腳本元素后它不會立即可用。

我建議你試試

const callAppendScript = async code => {
  const CODE_VERSION = aframeWindow.CODE_VERSION;
  code = `
    async function main(inPlayMode) {
      let CURRENT_CODE_VERSION = CODE_VERSION;
      ${code};
    }
    // no main() call here
  `;
  await appendScript({
    code,
    aframeWindow,
    id: 'code'
  }, aframeWindow.document);

  console.log(aframeWindow.onGreenPlayButtonClicked, "before");
  await main();
//^^^^^^^^^^^^
  console.log(aframeWindow.onGreenPlayButtonClicked, "after");
}