What could be causing the code to not wait for the listener to finish its execution?

Question

What could be causing the code to not wait for the listener to finish its execution?

I've been attempting to make sure that the listener has processed all messages before proceeding with console.log("Done") using await, but it doesn't seem to be working. What could I possibly be overlooking?

const f = async (leftPaneRowEle,index) => {
    leftPaneRowEle.scrollIntoView()
    leftPaneRowEle.children[0].click()
    console.log('downloadBtn clicked for', leftPaneRowEle)

    const listener = (msg: any) => {
      console.log('frontend msg:', msg)
    }
    const port = Browser.runtime.connect()
    port.onMessage.addListener(async (msg, sender) => {
      console.log("BG page received message", msg, "from", sender);
      listener(msg)
    });
    await port.postMessage({ question: "Can you " + allTFBs[leftpaneindexes[index]] + ":" + desc })
    return async () => {
      await port.onMessage.removeListener(listener)
      await port.disconnect()
    }
}

const en: HTMLElement = document.querySelectorAll('#extensionListTable tbody')[0] as HTMLElement
const leftPaneRowEle0 = en.children[leftpaneindexes[0]]
await f(leftPaneRowEle0,0)
console.log("Done")

PS: The inspiration behind my approach comes from this answer

javascript typescript async-await promise content-script

Answer 1

Answer №1

const myFunction = (element, index) => {
  return new Promise(async (resolve) => {
    element.scrollIntoView();
    element.children[0].click();
    console.log('Button clicked for', element);

    const listener = (msg) => {
      console.log('Message from frontend:', msg);
    };
    const port = Browser.runtime.connect();
    
    port.onMessage.addListener((msg, sender) => {
      console.log("Background page received message", msg, "from", sender);
      listener(msg);
    });

    port.onDisconnect.addListener(() => {
      console.log("Port disconnected");
      resolve(); // Resolve the Promise on disconnect
    });

    await port.postMessage({ question: "Can you " + allTFBs[leftpaneindexes[index]] + ":" + desc });
  });
};

const en = document.querySelectorAll('#extensionListTable tbody')[0] as HTMLElement;
const element0 = en.children[leftpaneindexes[0]];

(async () => {
  await myFunction(element0, 0);
  console.log("Task completed");
})();

Give it a try!

Answer 2

const myFunction = (element, index) => {
  return new Promise(async (resolve) => {
    element.scrollIntoView();
    element.children[0].click();
    console.log('Button clicked for', element);

    const listener = (msg) => {
      console.log('Message from frontend:', msg);
    };
    const port = Browser.runtime.connect();
    
    port.onMessage.addListener((msg, sender) => {
      console.log("Background page received message", msg, "from", sender);
      listener(msg);
    });

    port.onDisconnect.addListener(() => {
      console.log("Port disconnected");
      resolve(); // Resolve the Promise on disconnect
    });

    await port.postMessage({ question: "Can you " + allTFBs[leftpaneindexes[index]] + ":" + desc });
  });
};

const en = document.querySelectorAll('#extensionListTable tbody')[0] as HTMLElement;
const element0 = en.children[leftpaneindexes[0]];

(async () => {
  await myFunction(element0, 0);
  console.log("Task completed");
})();

Give it a try!

Answer 3

Answer №2

Due to the asynchronous nature of the port.onMessage.addListener function, the code does not wait for the listener to complete before executing the console.log("Done") statement. This results in the listener not processing all messages before moving on.

To remedy this issue and ensure that the code waits for the listener to finish processing, you can enclose the listener in a Promise and utilize the await keyword to hold off execution until the Promise resolves. Below is an updated snippet of the code:

const f = async (leftPaneRowEle, index) => {
  leftPaneRowEle.scrollIntoView();
  leftPaneRowEle.children[0].click();
  console.log('downloadBtn clicked for', leftPaneRowEle);

  const listenerPromise = new Promise((resolve) => {
    const listener = (msg) => {
      console.log('frontend msg:', msg);
      resolve(); // Resolve the Promise when the listener is triggered
    };
    const port = Browser.runtime.connect();
    port.onMessage.addListener(listener);

    port.postMessage({ question: "Can you " + allTFBs[leftpaneindexes[index]] + ":" + desc });
  });

  await listenerPromise; // Ensure code waits for Promise resolution

  return async () => {
    port.onMessage.removeListener(listener);
    port.disconnect();
  };
};

const en: HTMLElement = document.querySelectorAll('#extensionListTable tbody')[0] as HTMLElement;
const leftPaneRowEle0 = en.children[leftpaneindexes[0]];

await f(leftPaneRowEle0, 0);
console.log("Done");

This revised version encapsulates the listener within a Promise, where resolve() is invoked within the listener to indicate Promise fulfillment. By utilizing await, the code halts until the Promise is resolved prior to proceeding to console.log("Done").

Kindly note that the functionality relies on the correct operation of the Browser.runtime.connect() and port.postMessage() functions. It is essential to have the necessary setup and configurations in place for these functions to operate as intended.

Answer 4

Due to the asynchronous nature of the port.onMessage.addListener function, the code does not wait for the listener to complete before executing the console.log("Done") statement. This results in the listener not processing all messages before moving on.

To remedy this issue and ensure that the code waits for the listener to finish processing, you can enclose the listener in a Promise and utilize the await keyword to hold off execution until the Promise resolves. Below is an updated snippet of the code:

const f = async (leftPaneRowEle, index) => {
  leftPaneRowEle.scrollIntoView();
  leftPaneRowEle.children[0].click();
  console.log('downloadBtn clicked for', leftPaneRowEle);

  const listenerPromise = new Promise((resolve) => {
    const listener = (msg) => {
      console.log('frontend msg:', msg);
      resolve(); // Resolve the Promise when the listener is triggered
    };
    const port = Browser.runtime.connect();
    port.onMessage.addListener(listener);

    port.postMessage({ question: "Can you " + allTFBs[leftpaneindexes[index]] + ":" + desc });
  });

  await listenerPromise; // Ensure code waits for Promise resolution

  return async () => {
    port.onMessage.removeListener(listener);
    port.disconnect();
  };
};

const en: HTMLElement = document.querySelectorAll('#extensionListTable tbody')[0] as HTMLElement;
const leftPaneRowEle0 = en.children[leftpaneindexes[0]];

await f(leftPaneRowEle0, 0);
console.log("Done");

This revised version encapsulates the listener within a Promise, where resolve() is invoked within the listener to indicate Promise fulfillment. By utilizing await, the code halts until the Promise is resolved prior to proceeding to console.log("Done").

Kindly note that the functionality relies on the correct operation of the Browser.runtime.connect() and port.postMessage() functions. It is essential to have the necessary setup and configurations in place for these functions to operate as intended.

What could be causing the code to not wait for the listener to finish its execution?

Answer №1

Answer №2

Similar questions

The styles from the npm package are not being properly applied to the class

React Native formInput Component with Underline Decoration

Unable to dynamically populate Bootstrap select with real-time search and multiple options using jQuery

Retrieving images from a server via AJAX requests

Is it possible for search engines to crawl and index specific pages within a web application that is powered by

Creating a collapsing drop down menu with CSS

Do you notice a discrepancy in the number returned by Javascript's Date.getUTCDate() when the time component is set to

Upgrading from Angular 2 to 4 causes compilation failure in project

Auto play feature malfunctioning in Onsen-UI Carousel attribute settings

Keep things in line with async functions in Node JS

I'm facing a frustrating issue where using NodeJS with the Passport local strategy is resulting

Vue.js HTML5 Editor_vueful

specialized html elements within data-ng-options

jQuery menu fails to toggle the class name

Stop procrastinating and take action before the JavaScript function concludes

Leveraging the outcome of a for loop in order to set a condition within an else if statement

In order to set a condition for the mat date picker to display a text box in Angular if the selected date is for someone under 18 years old

What is the best way to remove table row data fetched from an API within a table?

What is the best way to insert a placeholder React element into a different Component using TypeScript?

What is the best approach to determine the value of a textbox in an array for each row of