Execute the javascript function asynchronously

I need to call the constGrid(arg1) function 3 times to set up an extjs grid when my form loads. There are other fields on my page as well. I want to ensure that the page does not hang or wait for the method to complete.

onLoad(function() {
    for (var i=0; i<arg.length;i++) {
        constGrid(arg[i]);
    }
    ....
})

However, using setTimeout like below causes the webpage, especially in IE, to hang until completion.

onLoad(function() {
    for (var i=0; i <argArr.length;i++) {
        (function(i) {
           setTimeout(constGrid(argArr[i]));
        })(i));
    }
    .... 
})

Your assistance in making this process asynchronous would be greatly appreciated. Thank you.

Answer №1

I'm not entirely certain about how this functions in other web browsers, to be perfectly honest. What you should provide as an argument for setTimeout is a function. However, what you are actually providing it with is the outcome of a function.

You could consider trying this alternative approach (not yet tested):

onLoad(function() {
    for (var i=0; i <argArr.length;i++) {
        setTimeout(constGrid.bind(window, argArr[i]));
    }
    .... 
})

This assumes that consGrid is within the global scope, which appears to be the case.

Answer №2

In reality, 'constGrid' is being invoked already when it should simply be passed as an argument to setTimeout. It would be better to define a function instead:

setTimeout(function() {constGrid(argArr[i]);}, 0);

(0 milliseconds for instant execution but asynchronously)

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

How to clear input fields in Ant Design ReactJS components

Utilizing the form list component from antd in my react.js project https://ant.design/components/form/#Form.List I have a basic form list set up where I can easily add or remove fields. At times, I need to reset the form and remove any additional items t ...

Harnessing the power of jQuery to create a horizontal scrolling experience based

I'm working on creating a javascript version of the website that currently uses flash. So far, I have completed the basic layout, which consists of a simple horizontal container with divs. You can view the code here http://pastebin.com/U3z2aJve I a ...

Adding a <link> tag with a specific onload attribute in the <head> using Next.js

While working on a Next.js project, I am trying to include the following HTML content within the <head>: <link href="..." rel="stylesheet" media="print" onload="this.media='all'" /> The code I ...

ways to animate the closing of a dropdown menu

I'm currently working on a navbar dropdown animation code that works on hover. However, I've encountered an issue when trying to use it on a phone - I can open the dropdown, but I can't seem to close it. Does anyone have suggestions on how ...

In ReactJS, ensure only a single div is active at any given moment

I'm working on a layout with three divs in each row, and there are multiple rows. Only one div can be selected at a time within a row, and selecting a new div will automatically unselect the previously selected one. Here is a simplified version of my ...

Exploring Vue Routing with Regular Expressions

Recently, I integrated a route with a parameter in my Vue project. const routes = [ { path: "/:lang(^$|^es$|^pt$|^cn$)", name: "Home", component: Page, }, { path: "/privacy", name: "Privacy", component: Privacy, }, { ...

Is there a way to append a URL parameter after a link is clicked using Vue.js?

I am currently working on integrating heading links on my website's sidebar that are linked to the main content using scrollspy. This allows users to easily navigate to different sections of the main content by clicking on the corresponding headings i ...

Mastering the ins and outs of ngStorage in AngularJS

Imagine a web page featuring a form that allows users to input multiple entries before submitting. As each entry is added, a summary of the data entered is displayed in a table at the top. Once all entries are completed, the user can then proceed to submit ...

Issues with Adding Dynamic Rows to MySQL

Struggling with adding dynamic rows and posting to MySQL. The variables seem off, but the script works fine. Need help with MYSQL posting specifically. As a beginner, I seek your forgiveness... The Script is running smoothly! <script type='text/ ...

What could be causing my .vue component to be undefined?

I've encountered an issue while using parcel-plugin-vue to compile a basic .vue component from a file. The compilation process seems to be running smoothly with no errors, but when I try to view the page in my browser, it appears blank without any con ...

What is the process for creating a progress bar in PixiJS?

Can someone guide me on creating a progress bar similar to the one in PixiJS? Screenshot ...

"Customized color selection based on conditions using Angular's UI-Grid

I'm trying to create conditional coloring in my grid based on the data, using the cellClass function in columnDefs. The issue I'm facing is that the classes are not updated when there is a selection change, preventing me from defining colors for ...

What is the best way to identify identical companies, consolidate them into a single entity, and combine their weights for a more

I've been experimenting with various methods such as filter, reduce, and includes, but I'm struggling to grasp the concept of how to solve this. Here is an array of objects that I have: [ { name: 'GrapeCo', weight: 0.15 }, { name: ...

ReserveYourSpot: Effortless Seat Reservation with AngularJS at the Click of a Button [GIF]

ReserveYourSpot: An innovative AngularJS application designed to streamline the process of reserving seats for a movie show, similar to popular platforms like BookMyShow. https://i.stack.imgur.com/PZk1I.gif Interactive User Functions (Use Cases): A ...

Troubleshooting: React Native and OneSignal notifications not showing up

Currently, I am developing an app in React Native and working on integrating notifications with OneSignal. Although I am able to efficiently receive notifications, I do not want them to be displayed on the screen when they are received. I came across a ` ...

What could be causing the readTextFile function to return undefined?

var XMLHttpRequest = require("xmlhttprequest").XMLHttpRequest; function readFile(file) { let fileContents = new XMLHttpRequest(); fileContents.open("GET", file, false); fileContents.onreadystatechange = function () { ...

Issue: Unable to locate the "es2015" preset in relation to the given directory

I encountered an issue while attempting to use babel. Error: Couldn't find preset "es2015" relative to directory webpack.config.js module.exports = { entry: './main.js', ourput: { path:'./', filename:&a ...

Steps to substituting characters within a date string

Create a function called normalize that changes '-' to '/' in a given date string. For example, normalize('20-05-2017') should output '20/05/2017'. This is my attempt: let d = new Date('27-11-2021'); fun ...

Displaying data in JSON format retrieved from a MySQL database

Greetings everyone! I am currently working on a website built with CodeIgniter. In one of my functions, I need to fetch data from MySQL and display the result in JavaScript as part of an Ajax call. Here is my PHP function for retrieving data: public func ...

Angular 2 keypress validation: Ensuring data integrity through real-time input verification

I am currently facing an issue with implementing number validation in my Angular2 project. I am struggling to replicate the JavaScript code provided below. Here is the HTML: <input type="text" class="textfield" value="" id="extra7" name="extra7" onkeyp ...