Javascript：元素 onchange 事件异步/等待回调

Question

我希望这个问题不要重复。 我有两个 HTML 元素，其中一个元素在更改时必须通过名为foo()的异步方法填充另一个元素的值。

以下代码有效：

<input type="text" id="elem">
<input type="file" onchange="
    (async ()=>{
       document.getElementById('elem').value = await foo(this);
    })()
">

以下没有（控制台中没有抛出异常，并且#elem没有更新）：

<input type="text" id="elem">
<input type="file" onchange="
   async ()=>{
      document.getElementById('elem').value = await foo(this);
   }
">

为什么第一个示例有效而第二个示例无效？

Answer 1

(function() {...})()这会调用 function。 这就像调用一个名为 function someFunction()

在您的第二个示例中，您只是创建了一个 function 而不调用它。 它返回 function 本身。

1. 调用：

onchange='someFn()'; // calls function

2. 不调用

onchange='someFn'; // returns function.

Answer 2

第一个示例是所谓的自调用 function 。 这就是为什么 is 包裹在 () 中，后跟 () 以立即调用 function。

第二个答案不起作用，因为您实际上并没有调用它。 只需添加“const myFunc = async () => {}”并在按钮单击时调用“myFunc”。