如何回调异步/等待函数

Question

我在 JavaScript 中的异步函数读取一个文件，然后将结果放入特定的 div。

async function loadContent( id, file ) {
    var response = await fetch( file );
    var text = await response.text();
    document.getElementById( id ).innerHTML = text;
}

我现在这样使用它：

loadContent("pagesmaxspan", "../export/" + `<?php echo $randomid ?>` + ".variable");

但是当我尝试获取变量时它不起作用

var myvar = $("pagesmaxspan").textContent; // <<--- this does not work

延迟它看起来像这样：

var myvar = "";

setTimeout(function() {
    myvar = $("pagesmaxspan").textContent;
}, 100);

如何在不使用setTimeout情况下执行此操作？

Answer 1

当您调用loadContent那里没有await ，因此您只需从async函数中获得一个 Promise，然后代码继续执行。

这就是为什么上面@Patrick 的建议有效的原因，将您之后需要执行的代码放在then 。

Answer 2

要为@kshetline 答案提供示例，这应该有效。

loadContent("pagesmaxspan", "../export/" + `<?php echo $randomid ?>` + ".variable")
.then(() => {
   console.log($("pagesmaxspan").textContent);
})

Answer 3

将回调添加到函数loadContent

async function loadContent( id, file, callBack = false) {
    var response = await fetch( file );
    var text = await response.text();
    document.getElementById( id ).innerHTML = text;

    //check if callback is function
    if (callBack && callBack.constructor && callBack.call && callBack.apply)
    {
        callBack();
    }
}

用它来称呼它

loadContent("pagesmaxspan", "../export/" + `<?php echo $randomid ?>` + ".variable",
 function(){
    var myvar = $("pagesmaxspan").textContent;
});