How much time can the browser dedicate to running JavaScript before moving on to loading a new page?

Question

How much time can the browser dedicate to running JavaScript before moving on to loading a new page?

The webpage contains multiple hyperlinks.

I want to monitor user clicks on these links.

Whenever a user clicks on a link, an Ajax request is sent to my server for processing. The server then returns relevant data, which is further processed on the client side and used for statistical purposes.

All of this request handling and data processing takes a certain amount of time.

My practical question is: what is the expected duration for the browser to complete all these actions? Is there a time limit?

Currently, I have two options:

When a link is clicked, use JavaScript to return false, perform necessary functions, and then open the new window.

This approach helps to prevent browser delay issues.

javascript ajax

Answer 1

Answer №1

If you'd like to make sure that the link isn't followed until your AJAX request has finished, you can opt for a synchronous request. Here's an example:

link.onclick = function () {
    var xhr = new XMLHTTPRequest(); // and the equivalents for other browsers

    xhr.open('GET', 'yourscript.cgi?data1=foo&data2=bar', false);
    // 'false' indicates a synchronous request

    xhr.send(); // the function won't return until the request is done

    // you can access the response data via xhr.responseText or xhr.responseXML
};

This method is a more dependable (and possibly quicker) approach to handling necessary notifications compared to waiting for a specific time duration.

Answer 2

If you'd like to make sure that the link isn't followed until your AJAX request has finished, you can opt for a synchronous request. Here's an example:

link.onclick = function () {
    var xhr = new XMLHTTPRequest(); // and the equivalents for other browsers

    xhr.open('GET', 'yourscript.cgi?data1=foo&data2=bar', false);
    // 'false' indicates a synchronous request

    xhr.send(); // the function won't return until the request is done

    // you can access the response data via xhr.responseText or xhr.responseXML
};

This method is a more dependable (and possibly quicker) approach to handling necessary notifications compared to waiting for a specific time duration.

How much time can the browser dedicate to running JavaScript before moving on to loading a new page?

Answer №1

Similar questions

Exploring the World of Observables within AngularJS

Using JQuery to toggle checkbox status after receiving an Ajax response

Tips for sending a property to a function that is imported and produces a component in React

How can I update the color of a list item when it is clicked within a foreach loop using knockout js?

Directus | The Revision is not being updated when a collection is created in Flows

Using Ruby method with two render statements and handling JQuery AJAX call response

Ensure that only numerical values in decimal form are permitted when entering data in Angular

What is the best way to transform a List<Pair<String, String>> to a List<String> using JavaScript?

Ensuring the timely execution of Javascript functions with Selenium before moving on

Upon initializing mean.io assetmanager, a javascript error is encountered

Using nightwatch.js to verify elements across different parts of a webpage

Pagination determined by the selections made in cascading dropdown menus

Utilizing Node.js createReadStream for Asynchronous File Reading

The Express Validator is unable to send headers to the client once they have already been processed

Switching Perspective on Live ExpressJS Path -- Node.JS

How can one check in JavaScript if a specific URL was targeted with a XMLHttpRequest?

"Why does Sequelize migration successfully create a table, yet the models are unable to establish a connection to the

The HTML changes are not reflected in the document.querySelectorAll function

Tips for creating a seamless merge from background color to a pristine white hue

Exploring the new features of utilizing buttons with the onClick method in the updated nextJS version 14.1.3