OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

async/await not working within Intersection Observer [duplicate]

  • Thread starter Thread starter SwineBurglar
  • Start date Start date
S

SwineBurglar

Guest
I have an Intersection Observer on my website that watches for a specific element to come into the viewport and then cycles through several classList.add() and classList.remove() methods, adding and removing various animate.css animation classes. I have the whole Intersection Observer working, except that the async/await keywords don't seem to have any effect, so all the timers start as soon as the Intersection Observer is triggered. This prevents me from being able to stop the animation sequence when the element scrolls out of view or when one of three inputs within the contact form are active.

My current workaround is to set the setTimout() delays to increasing intervals, so they play in the correct sequence, however that does not address the inability to stop the animation sequence.

I've read through a lot of MDN documentation, but I can't figure out if I'm using async/await incorrectly or if it's just not possible to use async/await within an Intersection Observer.

My Intersection Observer and its associated code are as follows:

Code:
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);
<p>I have an Intersection Observer on my website that watches for a specific element to come into the viewport and then cycles through several classList.add() and classList.remove() methods, adding and removing various animate.css animation classes. I have the whole Intersection Observer working, except that the async/await keywords don't seem to have any effect, so all the timers start as soon as the Intersection Observer is triggered. This prevents me from being able to stop the animation sequence when the element scrolls out of view or when one of three inputs within the contact form are active.</p>
<p>My current workaround is to set the setTimout() delays to increasing intervals, so they play in the correct sequence, however that does not address the inability to stop the animation sequence.</p>
<p>I've read through a lot of MDN documentation, but I can't figure out if I'm using async/await incorrectly or if it's just not possible to use async/await within an Intersection Observer.</p>
<p>My Intersection Observer and its associated code are as follows:</p>
<pre><code>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);

</code></pre>
Continue reading...
 
Top