What could be causing the lack of parallel execution for JavaScript Async in Chrome extensions?

Recently, I encountered an issue while working on a chrome extension. It seems that the website is not loading properly when I use a while loop inside an async function.

To investigate this further, I visited the website and executed the following code in the Chrome Dev Inspector console:

async function testFunction(){
   while(1) {}
}

testFunction()

This code creates an infinite loop within an async function. While async functions are designed to run concurrently, this particular setup caused the website to stop loading. I tested this by attempting to scroll through the page only to find that the scrollbar was unresponsive, indicating that the website had indeed halted.

EDIT: Now that I have learned that asynchrony does not equate to parallelism like multi-threading, let me elaborate on the actual problem I am facing and seek solutions:

Within a "for loop", I need to insert iframes and then wait for them to load before performing subsequent actions. This process repeats with different iframe sources each iteration. The challenge lies in waiting for the iframe to fully load without resorting to a while loop (which interferes with the loading itself). Any suggestions on how to approach this?

Answer №1

One important thing to note is that JavaScript does not have a concurrent execution model, except for the use of web workers. When an infinite loop occurs, it causes everything else to become blocked.

async is essentially just a form of syntactic sugar built upon the foundation of promises, which aim to address the issue known as "callback hell."

If you're interested in learning more about asynchronous JavaScript and how the event loop works, check out this insightful article: (there are plenty more articles on this topic available).

Answer №2

To truly grasp the essence of asynchronous programming and thread-based programming, one must first distinguish between the two.

In a conventional, non-threaded setting, a function will halt until an external event (be it a network signal, user input, or a timed trigger) occurs.

Contrastingly, in a multi-threaded environment, multiple threads operate simultaneously. This setup can pose challenges as threads may lock each other's memory to prevent conflicts when running concurrently.

Within an asynchronous framework, a single process thread remains active at all times but can switch between functions based on events. When a process reaches a point requiring waiting for another event, the JavaScript core prioritizes and delivers the next event from its list to the event manager in an order that may seem unpredictable but likely follows a pattern.

To delve deeper into this topic, refer to the full article available at:

https://medium.com/@punitkmr/does-async-programming-mean-multi-threading-fb8d1add56dc

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Ways to extract text from a temporary element

Here is my HTML code: <div class="p-login-info" ng-show="loggedOut()">My text.</div> This is the corresponding JavaScript code: var e = element(by.className('p-login-info')); e.getText() .then(function(text){ var logoutText = ...

Is there a way to continually monitor for collisions between webpage elements?

After successfully implementing the algorithm, I am currently struggling with finding a way to continuously check if the element has collided with other elements. For example: When the div with id 'water' collides with the div with id 'ora ...

"What are the reasons for encountering a '404 not found' error with Django when accessing a

I recently developed a Django script that utilizes a Python parser to navigate the web. I have set up AJAX to send requests to this Django script, but I am encountering a 404 error for the URL when the Ajax runs. Can you help me understand why this is occu ...

Having trouble with array slicing functionality?

I received a json list and stored it in an array. {"event_date": "2016-12-07 01:39:41","created_at": "15/11/2016 às 06:10"} Within this list, there is an attribute called "_date": "2016-12-07 01:39:41". I am attempting to extract the year '2016&apo ...

Concealing a label for a certain range of values

Does anyone have a clever solution for dynamically hiding a label associated with an input range element when the value is below a certain threshold? And then reappearing it once the value surpasses a specific minimum? Any thoughts on this matter? Thank ...

Securely transmit data using a JQuery modal dialog form with HTTPS encryption

I currently have a functional modal login dialog. The only issue I'm facing is that when the original page is loaded through http, I still need to securely pass credentials to the server via https. Ideally, I would like to achieve this with minimal mo ...

Implementing Adaptive Images in Bootstrap 5 for a Specified Design

I am currently working on a website layout that involves displaying one image per section. My goal is to have the images positioned on either side of the text when viewed on a larger screen, as shown in the example below: https://i.sstatic.net/bms6S.png ...

Arrangement of pipe operators in RXJS Angular 5

Do you think my operators are in the correct order? The code snippet below shows that the console logs from the two taps display the same values. Something seems off, right? return this.pcs.getAvailableMaterials(currentProduct.id).pipe( map( ...

When using the Node JS driver to find elements by their class name and retrieve the text, an error is encountered

While working on Selenium tests, I am seeking feedback and the closest solution I have found is using: driver.findElement(By.className('classname')).getText(); However, in order to make it more efficient, I need to find all elements with the sa ...

How come I am unable to expand a collection of objects using Zustand?

I am currently utilizing Zustand in a TypeScript Next.js application. Strangely, whenever I attempt to loop through my state object, I encounter a runtime error message. The structure of the damaged zone object for my car is as follows: const damagedZones ...

Utilize JavaScript to Extract Information from an Array of JSON Objects

Struggling to efficiently handle an array of JSON objects using JavaScript. The data fetched from my PHP file looks like this: Array ( [0] => Array ( [id] => 1 [name] => holly [text] => Text 1 ...

The JavaScript code is not running as expected!

i have this index.html file: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" ...

Managing multiple photo uploads using React JS and Laravel

I am trying to use axios in ReactJS to upload multiple images to the database, send the data from client-side to server-side, and handle image uploads with Laravel on the backend. However, I am encountering an issue when attempting to process multiple imag ...

How to access the dynamic route's path in Next.js when using Server Components?

Obtaining the dynamic route path in a Next JS server component poses a challenge. This task is simple when working with client components. If you are working on src/app/[id]/page.tsx "use client"; import { usePathname } from "next/navigatio ...

Unable to trigger window.open function or it is not being invoked

I am facing an issue with a button on my form that generates PDF files and saves them to the local machine. I want to be able to not only save the files locally but also have them available for download in the browser, especially when there are multiple fi ...

Tapping elsewhere on the screen will not result in the select box closing

I'm currently troubleshooting an issue with the site filter feature. When the btn-select is open and I click outside the panel, the select remains open. I am looking to create an event that will detect when the dropdown is closed so that I can close t ...

Using the entire row as a toggle mechanism to select items in an office-ui-fabric detailslist, instead of relying on a small checkbox for selection

Currently, I am utilizing Office UI Fabric React components and I am aiming to enhance the default selection behavior for a DetailsList. At present, there is a difference in functionality between clicking on a row and clicking on the small checkbox located ...

Using If-Else Statements in HTML to Showcase Information

I need assistance with passing the alt text value on an image using the following code: <img *ngIf="document.story_image_1 " [src]="document.story_image_1 " class="image-1" alt="{{document.image_alttxt | 'default ...

How do you typically approach testing Cloud Code on Parse?

While working on developing a substantial amount of business logic in webhooks like beforeSave/afterSave/etc. using Parse.com, I have encountered some challenges as a JavaScript/Parse beginner. The process seems somewhat tedious and I'm questioning if ...

Unveiling an HTML file using the express.static middleware on Replit

When using Replit to render an HTML file with res.sendFile within an app.get function, everything works smoothly. I can include logos, styles, and JavaScript logic files by utilizing the express.static middleware. However, if I attempt to also make the HTM ...