javascript - 为什么等待延迟在函数作用域结束时结束

Question

背景

我正在探索 Async/Await 语法，我认为我有一个聪明的方法来等待构建的 CSS 转换。但它不起作用，我不明白为什么。

代码

const setStyleAndWait = async function( el, property, value ) {

    var setTheStyle = (el, property, value) =>
        new Promise(resolve => {
            el.style[property] = value;
            const transitionEnded = e => {
                if (e.propertyName !== property) return;
                el.removeEventListener('transitionend', transitionEnded);
                resolve();
            }
            el.addEventListener('transitionend', transitionEnded);
        });

    await setTheStyle( this, property, value );

    console.log('Run logic inside await\'s parent scope');

};

setStyleAndWait( element, 'opacity', '0' ); // element is a reference to an element with a transition on for it's opacity style
console.log('Run logic outside await\'s parent scope.)

问题

当我运行它时，外部 console.log 立即运行，而内部则等待直到 promise 得到解决。为什么外部逻辑不等待函数完成？

Answer 1

setStyleAndWait 函数是异步的，不会等待，因此它会立即返回，导致外部日志首先完成。您可以将其重写为: setStyleAndWait(element, 'opacity', '0').then(() => console.log('完成后运行'))

或者将整个事情包装在异步函数中，以便您可以使用await。