Is it possible for a synchronous (blocking) ajax request to delay the rendering of a website's UI?

This query pertains to jQuery, though not exclusively focused on it.

To sum it up:

Can a synchronous ajax call prevent a regular button from being clicked on? My experimentation shows no issues, but compatibility with other browsers could be a concern.

Going into more detail:

In a previous inquiry about how to block an ajax call (I want it to block), I was informed that certain browsers might indeed have limitations.

Even the jQuery documentation mentions: 

Note that synchronous requests may temporarily lock the browser, disabling any actions while the request is active.

I aim to:
1. Understand why and how this locking could occur.
2. Evaluate the likelihood of such occurrences.

Based on my interpretation, which could be flawed:
I speculate that "locking" occurs when the UI isn't built or updated before initiating the ajax call, causing the javascript VM to be blocked and delaying UI enhancements. Am I correct in this assumption?

javascriptajax

Answer №1

A synchronous request in the browser will cause it to wait until the response is returned. The chances of this happening are 100%, but if the response comes back quickly, it may not be very noticeable. However, you can't always rely on a speedy response.

This is where ajax calls come in. The "a" in ajax stands for asynchronous, meaning it doesn't block other processes.

Because ajax calls are asynchronous, your code can continue running while waiting for the response. This is why callbacks are used to handle the response when it finally arrives.

Why not give it a try?

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

javascript: obtain the height of the pseudo :before element

Can someone help me figure out how to get the height of a pseudo :before element? I've tried using jQuery but it's not working as expected. Here's what I attempted: $('.test:before').height() // --> null If you want to take a ...

javascripthtmlcss

The Twitter Bootstrap template page is leaping past the beginning of the div

Currently, I am utilizing the Twitter Bootstrap template from this source to develop a one-page responsive website. While the template is working effectively, I have encountered an issue with the page jumps in the HTML. Specifically, when navigating to th ...

javascriptjquerycsstwitter-bootstraptwitter-bootstrap-3

Table template incompatibility detected with Bootstrap

I have been attempting to recreate a template using a table as my foundation, but simply copying the code does not yield the same results. For reference, here is the table template I am using: Below is the code I have copied and pasted into my index.csht ...

javascriptjqueryhtmldatatablesbootstrap-4

Encountering Rendering Issues with EJS Post HTML Conversion

After working on a much larger project for over a month, I'm now six hours into troubleshooting and everything is starting to blend together. Prior to switching to EJS, everything was working perfectly. I'm not looking for someone to solve the ...

javascriptnode.jsnpmejs

The Node.js application appears to be unresponsive on the designated port

When specifying port 30000, my app ends up listening on a different port unexpectedly. Below is the code snippet I have written: var express = require('express'); var bodyParser = require('body-parser'); var path = require('path& ...

javascriptnode.jsport

Creating curved arcs within a polyline by utilizing the bulge feature in THREE.JS

Currently, I am importing a CAD file from a DXF format and I am looking for a way to draw an arc between two arbitrary points with a bulge value. My approach involves using THREE.Line to create segments of the arc. This resource outlines some of the essen ...

javascriptmaththree.jscad

Node.js square brackets notation for functions [function] or [function: isBuffer]

Apologies for what may seem like a beginner question. I've been exploring the global variable in node.js and I'm puzzled by the syntax. It appears to be a JSON object, but it's formatted as follows: reallyExit: [Function: reallyExit], bindi ...

javascriptjsonnode.js

After a successful login, learn how to implement a bottom tab menu in React Native

I'm diving into the world of react-native and finding myself a bit lost when it comes to routing and navigation. I have 4 screens - Login, Register, Home, and Links. The Register and Login screens are all set up, with the ability to navigate back usin ...

javascriptreactjsreact-nativereact-native-navigation

Is it advisable to place custom middleware at the end of the chain in a customized next.js server setup?

I am facing a challenge in integrating a custom middleware into a bespoke next.js server. The issue lies in the fact that there are no set path patterns to which I can bind my middleware, as our CMS generates URLs of varied forms and structures. Therefore, ...

javascriptnode.jsexpressnext.jsserver-side-rendering

Navigating through a list using tabs and automatic scrolling to a specific index in React with Material UI's Scrollspy

If there was a vast array of items, each belonging to a specific category, const categories: string[] = [0, 1, 2, 3, 4, 5]; const items: {name: string, category: number}[] = [{name: "foo", category: 1}, {name: "bar", category: 1}, {name ...

javascriptreactjstypescripttabsmaterial-ui

wordpress widget that triggers a function when a click event occurs on jquery

I'm facing an issue where this function works perfectly in my header, but seems to have no effect when used in a widget $("#myID").click(function(){ var name = $("#name").val(); var phone = $("#phone").val(); console.log(name +" "+ phone) ...

javascriptphpjqueryajaxwordpress

What is the best way to compare dates in order to obtain the necessary results?

Question : Filter the JSON array to retrieve specific entries 1: All entries with name "Sam". 2: All entries with date "Dec 2019". // JSON Data provided below. var data = [{ "id":"27", "0":{ "name":"Sam", "date":"2021-02-28" ...

javascriptnode.jsangular

Sending an array with a specific identifier through JQuery ajax

I'm facing an issue where I am sending an array of values via jQuery AJAX to my servlet. However, the servlet is only picking up the first value in the array, even though there are more elements present. $.ajax({ type: "POST", url: "mySer ...

javascriptjqueryajaxtomcatservlets

When making an asynchronous call, only the initial character is shown in the (HTML) listbox elements

I have a query regarding AngularJS compatibility with IE9. My issue is with a modal window containing a patient list. <div class="modal-header"> <h3 class="modal-title">Patient list</h3> </div> <div class="m ...

javascripthtmlajaxangularjsinternet-explorer-9

Express.js routes are malfunctioning with jade/pug, causing frequent crashes and routing errors

Here is the code for my contact router: var express = require('express'); var router = express.Router(); /* GET users listing. */ router.get('/', function(req, res, next) { res.render('contact'); }); module.exports = rou ...

javascriptnode.jsexpressroutes

Setting up the initial 3 parameters in a v-for loop

What is the best way to begin a v-for loop? For instance, we have an array named "array" with the following values: array = [dog, cat, e, f, g]; I am interested in using a v-for loop that will start looping through and only consider the first 3 values. ...

javascriptvue.jsvuejs2

if and elsif JSON with Angular

Currently, I am working on completing a task within our project. To provide more context, I have a field with items that I must select. Once I choose an item, another field appears in which I must select additional elements. These elements need to be sen ...

javascriptjsonangular

Unlock the Power of Heroku: Leveraging Node.js to Share Environment Variables Across JavaScript Pages

Currently, I am following the 'getting started' guide on the Heroku webpage. As part of this process, I have cloned their tutorial repository and decided to add my own index.html and app.js files to the existing /public folder. The directory str ...

javascriptnode.jsherokuexpressenvironment-variables

Using JavaScript to convert a UTC Date() object to the local timezone

I am working with a Date() object that holds a UTC date. I need to convert it to the local timezone of the user. Any suggestions on how I can achieve this? Let me know! :-) ...

javascriptdatetimeutc

Utilizing parameters and variables as function arguments in reactjs

I have created a function type React component: function Card(props, {icon}) { return ( <div className="card"> <FontAwesomeIcon icon={icon} className="icon"/> <h3 className="text">{props.name}</h3&g ...

javascriptreactjs