时间戳

首页 > 解决方案 > JavaScript 异步函数执行顺序

javascript - JavaScript 异步函数执行顺序

问题描述

我有一个调用多个异步函数的函数。

$("#signUpForm").validator().on("submit", function(event) {
if (event.isDefaultPrevented()) {
    // handle the invalid form...
    sformError();
    ssubmitMSG(false, "Please fill all fields!");
} else {
    // everything looks good!
    event.preventDefault();
    
    //create use when form is submit
    ssubmitForm();
    
    //send email verification
    sendEmailVerification();

    //sign out the user
    signOut();
    
  
}
});

函数 ssubmitForm() 、 sendEmailVerification() 和 SignOut() 都被声明为异步的，并且都在其中包含 await 语句。

我得到了奇怪的行为，这似乎向我表明这三个函数没有按照它们在代码中编写的顺序运行。我认为使用异步代码，所有其他代码都会暂停执行并等待 await 语句完成。但从我的日志来看，我的功能似乎并非如此。这种行为是否仅在异步函数本身的范围内？三个函数的执行顺序是什么？可以在 ssubmitForm() 执行完成之前调用 sendEmailVerification() 吗？

另外，我不确定我是否使用了正确的措辞/词汇来描述我的问题。这对我来说是一个大问题，因为如果我不知道词汇，我就不容易搜索我的问题。请随时纠正我对术语的任何滥用。

标签： javascriptasync-await

解决方案

它们按照调用顺序启动，但由于它们是异步的，它们可能不会按照调用顺序运行。它们立即返回并返回一个 unresolved Promise，最终将在被调用函数完成时异步解析（或拒绝）。

您需要依次标记您的函数async和await每个调用：

$("#signUpForm").validator().on("submit", async function(event) {
if (event.isDefaultPrevented()) {
    // handle the invalid form...
    sformError();
    ssubmitMSG(false, "Please fill all fields!");
} else {
    // everything looks good!
    event.preventDefault();
    
    //create use when form is submit
    await ssubmitForm();
    
    //send email verification
    await sendEmailVerification();

    //sign out the user
    await signOut();
    
  
}
});

为了更好地理解async/ await，我建议先了解一下 Promise。它们是使一切顺利的基础模型；async/await只是顶部的语法糖。

推荐阅读