Async/await не работает в Intersection Observer [дубликат] ⇐ CSS

[Anonymous]

На моем веб-сайте есть Intersection Observer, который отслеживает появление определенного элемента в области просмотра, а затем циклически выполняет несколько методов classList.add() и classList.remove(), добавляя и удаляя различные классы анимации animate.css. У меня работает весь Intersection Observer, за исключением того, что ключевые слова async/await, похоже, не имеют никакого эффекта, поэтому все таймеры запускаются, как только срабатывает Intersection Observer. Это не позволяет мне остановить последовательность анимации, когда элемент прокручивается из поля зрения или когда один из трех входов в контактной форме активен.
Мой текущий обходной путь — установить setTimout () задержки с увеличением интервалов, поэтому они воспроизводятся в правильной последовательности, однако это не устраняет невозможность остановить последовательность анимации.
Я прочитал много документации MDN, но я не могу понять, неправильно ли я использую async/await или просто невозможно использовать async/await в Intersection Observer.
Мой Intersection Observer и связанный с ним код следующие:
const contactSectionSubmitButtonWrapper = document.querySelector('.submit-button-wrapper');

async function timer(fn, milliseconds){
await setTimeout(fn, milliseconds);
}

async function animation01(){
if(document.activeElement.id == ("name-field" || "email-field" || "message-field")) {
console.log('Submit button animation stopped because an input field is active.');
} else {
console.log('Submit button animation 01');
contactSectionSubmitButtonWrapper.classList.add('animate__pulse');
}
}

// There are twelve more of these animationXX functions,
// but it's the same basic concept repeated, so I omitted
// the other twelve for the sake of brevity.

const contactSectionSubmitButtonObserver = new IntersectionObserver(
async(entries)=>{
console.log(entries);
for (const entry of entries) {
if(entry.isIntersecting) {
await timer(animation01, 3000);
await timer(animation02, 6000);
await timer(animation03, 9000);
await timer(animation04, 12000);
await timer(animation05, 15000);
await timer(animation06, 18000);
await timer(animation07, 21000);
await timer(animation08, 24000);
await timer(animation09, 27000);
await timer(animation10, 30000);
await timer(animation11, 31000);
await timer(animation12, 35000);
await timer(animation13, 38000);
}
}
},
{
threshold: 0.1,
root: null,
rootMargin: '0px'
}
);

contactSectionSubmitButtonObserver.observe(contactSectionSubmitButtonWrapper);



Подробнее здесь: https://stackoverflow.com/questions/758 ... n-observer