如何使JS堆栈真正“等待”为了结束异步功能？

Question

我正在学习异步JavaScript的工作原理，并且正在尝试将数字1和2（按此顺序）打印出来。 logs 1具有settimeout的功能，因此，该顺序始终倒置。我知道为什么会发生这种情况。我只是不知道如何使它按照我的意愿工作。我已经尝试过：

function first(){
    setTimeout(
            ()=>console.log(1),
            1000
    )

    return Promise.resolve(true)
}

function second(){
    console.log(2)
}


function a(){
    first()
    .then(second())
}

console.log("running...")
a()

还有：

async function first(){
    setTimeout( 
        ()=>console.log(1),
        2000
    )

    return true            
}

function second(){
    console.log(2)
}


async function a(){
    await first()
    second()
}

console.log("running...")
a()

这两种打印

running...
2
1

所需的输出都将是

running...
1
2

我做错了什么？

Answer 1

回调是不可接受的吗？

function first(callback) {
  setTimeout(() => {
    console.log(1);
    callback();
  }, 2000);
}

function second() {
  console.log(2)
}
// When first is completed, second will run.
first(() => second());
console.log("This can run at any time, while we're waiting for our callback.");

Answer 2

阅读有关JS Promises的了解（ ）在这里他的代码工作

function first(){
    return new Promise((resolve)=>{
                        console.log('waiting')
                        setTimeout( ()=>{console.log(1); resolve('waiting finished')}, 2000 )
                        }
                      );
                    }

function second(){
    console.log(2)
}


async function a(){
    await first().then(res => console.log(res))
    second()
}

console.log("running...")
a()

Answer 3

谢谢你们的反馈。我向您的答案投票，因为他们俩都帮助我解决了这个问题，并帮助我对手头上的问题有了更高的了解（但是因为我在这里仍然是新手，所以upvote就像一个承诺一样）。

但是，我觉得他们都没有进入引起问题的具体点。

这是现在注释的工作代码

// With Callback, Async and Await

async function first(sec){
     
    await new Promise ( (resolve) =>  setTimeout(()=>{ // this ' (resolve) => ' will make 
                                                       //sure the Promise is pending until 
                                                       // the code reaches the
                                                       // execution of function resolve()
        console.log(1)
        resolve(/* return a value */) 
                    
        /*  so,  ' (resolve) => ' and then the 
            ' resolve( value ) '
            are THE MAIN THING.... "await" will only work if 
            there is a Promise<pending> right in front of it, 
            and in order to do that we have to create
            a Promise object that will receive a resolve() AND/OR reject() as argument
            functions. (or whatever function name we want to use for those parameters).
 
            And when the code fulfills the promise 
            (by reaching either resolve() or reject()) --- in this case, by reaching 
            ' resolve( value ) ', 
            the Promise<pending> will turn to Promise<fulfilled> and this 
            asynchronous part of the code will, then, continue... 
        */ 
                    
        },
        2000
    ))

    sec()
}


function second(){
    console.log(2)
}


console.log("With callback, async, await ...")
first(second)

，没有回调

// Without Callback, and using .then()

function first(){
     
    return new Promise ( (resolve) =>  setTimeout(()=>{ 
        console.log(1)
        resolve(/* return a value */) 
                    
        },
        2000
    ))
}


function second(){
    console.log(2)
}


console.log("Without callback, and using .then() ...")
first().then(second) // we could also use first().then(()=>second()) if we wanted to
                     // do something with the returned fulfilled Promise/Response object
                     // or if we wanted to send the second() function to the 
                     // callback stack before running it