Почему задержка завершения ожидания в конце области действия

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

зачем ждать, когда вы объявляете функцию с ключевым словом async, вы говорите, что ваша функция возвращает обещание. если вы хотите, чтобы вызывающая функция ожидала разрешения / отклонения функции, вы должны использовать await или затем / catch, как хотите.

В вашем коде вам просто нужно добавить await в setStyleAndWait ()

Answer 2

Когда вы добавляете асинхронную перед функцией, вы делаете эту функцию асинхронной, это означает, что функция выполняется, но код переходит на следующую строку, не ожидая разрешения.

Таким образом, чтобы эта работа работала, вам нужно инкапсулировать весь код внутри асинхронной функции и сделать константу setStyleAndWait для ожидания продолжения значения с ожиданием

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

Answer 3

Функция setStyleAndWait является асинхронной и ее не ожидают, поэтому она сразу возвращается, что приводит к первичному завершению внешнего журнала.Вы можете переписать это как: setStyleAndWait(element, 'opacity', '0').then(() => console.log('this runs after completion'))

или обернуть все это в асинхронную функцию, чтобы вы могли использовать await.