背景

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立即运行，而内部则等待直到诺言解决。为什么外部逻辑不等待功能完成？

Answer 1

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

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

Answer 2

为什么要等待，当您使用async关键字声明函数时，您要说的是函数正在返回promise。如果希望函数调用者等待函数解析/拒绝，则必须使用await或then / catch。

在您的代码中，您只需要将await添加到setStyleAndWait（）

Answer 3

在函数前添加异步时，就是使该函数异步，这意味着该函数已执行，但代码跳至下一行而不等待解析。

因此，为了完成这项工作，您需要将整个代码封装在异步函数中，并使常量setStyleAndWait等待值继续等待。

 async function envelope(){
     const setStyleAndWait = await function(//rest of code)
 }

为什么等待延迟在功能范围结束时结束

背景

代码

问题

3 个答案: