What is the best way to replicate a synchronous ajax call? (mimicking synchronous behavior with asynchronous methods)

Given that a "native" synchronous ajax call can block the user interface of the browser, it may not be suitable for many real-world scenarios (including mine).

I am curious to know if there is a way to mimic a synchronous (blocking) ajax call using an asynchronous (non-blocking) ajax call, while still achieving the result of a synchronous call without affecting UI performance.

The concept is illustrated in the following code snippet:

function do_synchronous_ajax_call(url){
    // Executes an asynchronous ajax call, which does not interrupt the user interface, but pauses the current script execution
}

var xyz = do_synchronous_ajax_call("http://...."); // Call blocks until the internal ajax request completes
// Process `xyz` here

In essence, the goal is to create a form of "artificially" synchronous ajax call that doesn't impact UI performance.

Although JavaScript lacks multi-threading support, I am still interested in exploring this possibility.

This marks the third inquiry on this topic.
My previous questions are as follows:
how to block on ajax call (I want it to block)
can a synchronous (blocking) ajax call block the browser's UI?

javascriptajax

Answer №1

In order for the user interface to be refreshed, control must be returned to the browser through the use of asynchronous code (or any code that promptly returns)

Answer №2

Why bother "blocking" when you can just let things be? It appears that the concept of asynchronous flow might still be elusive to you. Rather than waiting around, you should define what actions to take once the data is ready. Arrange your request with a callback function that will execute the remaining code, send off the request, and step away from JavaScript, allowing the browser to carry on until it's time for your code to resume.

Answer №3

To ensure a globally available lock in your code, consider utilizing a boolean variable within a global context or an object that contains various options and objects at a universal level.

function handle_ajax_call(url)
{
    if (!is_locked)
    {
        // perform actions here
        is_locked = true;

        xmlhttp.onreadystatechange = processCallback;
    }
}

function processCallback() {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
         // additional actions here
    }

    is_locked = false;
}

If you transition to using jQuery AJAX, you will have access to a wide range of framework events and methods such as "beforeSend", allowing you to implement a similar locking mechanism alongside the "done" event for better control.

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

The Angular 9 custom directive is malfunctioning on mobile devices

I recently created a custom directive in Angular 9 that allows users to input only digits and one decimal point. While the directive works perfectly on desktop, it seems not to function at all on mobile devices - almost as if it doesn't exist within t ...

javascriptangulartypescriptangular9mobile-browser

What is the best way to position an image in the center of the screen with uniform margins around it?

Could someone please help me figure this out? I've been attempting for some time but can't seem to make it work with the bottom margin. This website in the fashion industry showcases what I'm trying to achieve: It's designed to be resp ...

javascriptjqueryhtmlcss

Issue with dynamic code detected by Sys.Application.add_init

I am facing a challenge with an older application that I recently took over ownership of. My efforts to successfully run it have been partially fruitful, as I am encountering some strange behavior that seems to be related to Internet Explorer 11. Interesti ...

javascriptasp.netajaxascxaspx-user-control

Error: ReactJs unable to find location

I'm attempting to update the status of the current page when it loads... const navigation = \[ { name: "Dashboard", href: "/dashboard", current: false }, { name: "Team", href: "/dashboard/team", current: fa ...

javascripthtmlnode.jsreactjs

What is the best way to set up localStorage with a multi-dimensional array

I am struggling with modifying my local storage and it's taking up a lot of my time. Initially, I set it up like this: localStorage.setItem('example','{"data": []}'); It was working fine, but now I need to structure it like the ...

javascriptlocal-storage

Tips for defining a dynamic class variable in React with Flow

I am working with a map that assigns a reference to items, specifically in this scenario it is a video. const ref = this[`video-${index}-ref`]; I am seeking guidance on how to properly type this using Flow. The number of indexes may vary. ...

javascriptreactjsflowtype

Node js server for world's warm greetings

I have been attempting to utilize Node.js for hosting a web server on a dedicated PC, but unfortunately I am unable to access it from anywhere outside of my local network. After researching online, the general consensus is that all I need to do is enter t ...

javascriptnode.jshttpserver

Create PDF files on-the-fly using the html-pdf module

Recently, I've been using the npm package html-pdf for generating PDF invoices dynamically. However, I encountered a problem where instead of saving values to the PDF file, it was saving ejs code. Does anyone have any insight on why this might be happ ...

javascriptnode.jsexpressnpmejs

A guide to sending props to a CSS class in Vue 3

I need to develop a custom toast component that includes a personalized message and class. While I have successfully passed the message as props, I am encountering difficulties in applying the bootstrap class. Component File: Toast.vue <script ...

javascriptcssvue.jsvuejs3bootstrap-5

Enhance your Next.js application with beautifully styled formatting using prettier

Looking for some assistance in setting up prettier with my next.js project. I have the following configuration defined in my package.json file: "scripts": { "format": "prettier --write \"**/*.{js, jsx}\"", }, My project structure includes sever ...

javascriptreactjsnext.jsformatterprettier

Rendering JSON Data in JavaScript using Table Pagination

Currently, I am working on rendering JSON data from a URL onto a table. My challenge is to display only 10 rows per page and I'm seeking guidance on how to achieve this. Below is the code snippet that I am using for rendering the data: const url = " ...

javascriptjqueryjsonrendering

Is it necessary to close the browser for jQuery to reload an XML document?

I've successfully used jQuery's $.ajax to retrieve an xml value in my code. However, I'm facing an issue where any changes made to the xml document are not reflected upon a browser refresh. Specifically, the new saved xml value xmlImagePath ...

javascriptjqueryajaxxml

What is the best way to trigger an onclick event for an input element with a type of "image"?

In the code I'm working on, there's an input of type "Image". <div class="icon" id="button_dictionary"> <form> <input class="buttonDictionary" type="image" src="icone_dicionario.jpg" value="" id="inputDictionary"> ...

javascripthtmlcssimagehtml-input

Ensuring that all checkboxes have been selected

I have 5 checkboxes all with the attribute name set as relative-view. To confirm that all of them are checked, I know how to verify the first and last one: expect(element.find('input[name="relative-view"]').first().prop("checked")).toBe(true); ...

javascriptjqueryangularjsjasmine

JavaScript (geolocation) error: Unhandled TypeError - Invocation not allowed

Encountering the Javascript error "Uncaught TypeError: Illegal invocation" while executing the code var nativeGeoloation = window.navigator.geolocation.getCurrentPosition; nativeGeoloation(function (){ alert("ok")}); Despite attempting to call the code w ...

javascripthtmlcordovageolocation

Can anyone assist me with this HTML/jQuery code?

Despite my efforts, I've been unable to achieve success. The challenge I'm facing is with duplicating controls for adding images. I have a button and a div where the user can choose an image by clicking the button. The selected image appears in ...

javascriptjqueryhtmlcss

IframeResizer.js is automatically readjusting its position to the top left corner (0,0) when a javascript event or

Within our internal web environment, I have implemented IframeResizer.js in a rather basic manner. The child page contains a table generated by a third-party application with mouseover/hidden and javascript tags associated with the TH elements (including a ...

javascriptjqueryiframe-resizer

Terminate the JWT token and automatically log out the user in the event of a banning or modification

Greetings fellow developers, I've been working on enhancing my application's user system to include functionality for administrators to upgrade an account's level (granting admin privileges if it reaches level 10) or ban users from the site ...

javascriptnode.jsapiexpressjwt

PHP is receiving data from $.post in an invalid format

I am facing a challenge in sending a JavaScript Object() to a PHP file in the correct format that $.POST requires. The PHP file does not establish any $_POST[] variables, which suggests that I may be transmitting the data in an improper format. JS: $(&ap ...

javascriptphpjqueryhtmlpost

Learn the technique of hovering over an image to see it blur and reveal overlay text

Currently, I am in the process of creating my portfolio website and after experimenting with some code, I was able to achieve the desired outcome. <div id="nytimes" class="portfolio-thumbnail" style="left: 100px; top: 80px;"> <span class="text ...

javascriptjqueryhtmlcss