Javascript Async Functions Not Awaiting Properly

Question

The 2 fadeInList functions define the fading behavior of a single continuous fading list, split onto 2 lines. They typeOutText function types out some text and then (should) call the List1 function, await its completion, then call the List2 function. Before I added the enter/spacebar key events, the 2nd list properly awaited the completion of the first before rendering. Now, for some infuriating reason that even 4 hours of debugging cannot find, the lists render simultaneously.

async function fadeInSlide3List1() {
  const slide3List1 = slide3Lists[0];
  const container = document.querySelector(".design-list1");
  container.style.visibility = "hidden";

  let nextItemSpeed = 2000;

  for (let i = 0; i < slide3List1.length; i++) {
    const listItem = document.createElement("li");
    listItem.textContent = slide3List1[i];
    listItem.style.opacity = 0;
    listItem.style.transition = "opacity 1.5s";

    container.appendChild(listItem);
  }

  container.style.visibility = "visible";

  const fadeNextItem = async (index) => {
    if (index < slide3List1.length) {
      const listItem = container.children[index];
      await new Promise((resolve) => setTimeout(resolve, nextItemSpeed));
      listItem.style.opacity = 1;
      fadeNextItem(index + 1);
    } else {
      window.removeEventListener("keydown", handleKeyPress); // Remove the event listener after the final list item is faded in
    }
  };

  const handleKeyPress = (event) => {
    const keyPressed = event.key;
    if (keyPressed === "Enter" || keyPressed === " ") {
      nextItemSpeed = 500;
      fadeNextItem(0);
    }
  };

  window.addEventListener("keydown", handleKeyPress);

  fadeNextItem(0);
}

async function fadeInSlide3List2() {
  const slide3List2 = slide3Lists[1];
  const container = document.querySelector(".design-list2");
  container.style.visibility = "hidden";

  let nextItemSpeed = 2000;

  for (let i = 0; i < slide3List2.length; i++) {
    const listItem = document.createElement("li");
    listItem.textContent = slide3List2[i];
    listItem.style.opacity = 0;
    listItem.style.transition = "opacity 1.5s";

    container.appendChild(listItem);
  }

  container.style.visibility = "visible";

  const fadeNextItem = async (index) => {
    if (index < slide3List2.length) {
      const listItem = container.children[index];
      await new Promise((resolve) => setTimeout(resolve, nextItemSpeed));
      listItem.style.opacity = 1;
      fadeNextItem(index + 1);
    } else {
      window.removeEventListener("keydown", handleKeyPress); // Remove the event listener after the final list item is faded in
    }
  };

  const handleKeyPress = (event) => {
    const keyPressed = event.key;
    if (keyPressed === "Enter" || keyPressed === " ") {
      nextItemSpeed = 500;
      fadeNextItem(0);
    }
  };

  window.addEventListener("keydown", handleKeyPress);

  fadeNextItem(0);
}

async function typeOutSlide3() {
  const slide3Lines = slideLines[2];
  const content = slideContent[2];

  if (content) {
    slide3Container.innerHTML = content;
  } else {
    let nextLineSpeed = typingSpeed;
    let delay = 1500;

    const renderNextLine = async (i) => {
      const line = slide3Lines[i];
      await new Promise((resolve) => setTimeout(resolve, delay));
      await typeOutText(
        slide3Container,
        line.text,
        nextLineSpeed,
        line.elementType,
      );
    };

    const handleKeyPress = (event) => {
      const keyPressed = event.key;
      if (keyPressed === "Enter" || keyPressed === " ") {
        window.removeEventListener("keydown", handleKeyPress);
        nextLineSpeed = 10;
        delay = 500;
      }
    };

    window.addEventListener("keydown", handleKeyPress);

    for (let i = 0; i < slide3Lines.length; i++) {
      await renderNextLine(i);
    }

    slideContent[2] = slide3Container.innerHTML;
  }

  const paragraphs = slide3Container.getElementsByTagName("p");
  if (paragraphs.length >= 2) {
    paragraphs[1].classList.add("second-p");
  }

  await fadeInSlide3List1(); // Render and fade-in list 1
  await fadeInSlide3List2(); // Render and fade-in list 2
}

I've been debugging for hours. I have exhausted my knowledge. I am not particularly skilled with JavaScript.

You probably meant `return fadeNextItem(0)` or `await fadeNextItem(0)` — Phil, Jul 06 '23 at 01:53
Also though `fadeNextItem()` is `async`, you don't `await` a call to it. — Pointy, Jul 06 '23 at 01:54
@Phil - Yeah, I found it. I had to actually have the functions return a promise to be awaited. In a previous version this was present, and it must have been incidentally removed. This is one of the pitfalls of self-teaching. You'll know more high-level stuff than the average colloquially educated individual, but the tiny stuff is easily overlooked. Thank you! — Matthew Ford, Jul 06 '23 at 16:46

score 1 · Answer 1 · answered Jul 06 '23 at 01:56

1

HAHAHA! The hilariously simple things we miss when we get caught up. For anyone curious, the functions were not returning a completion promise and therefore there was nothing to await. Not good at JavaScript guys...

answered Jul 06 '23 at 01:56

Matthew Ford

41
4

Javascript Async Functions Not Awaiting Properly

1 Answers1