Introduction

In browser JavaScript, there is no good modern way to do a truly blocking AJAX request on the main UI thread without using async: false, and that option is deprecated for good reason. It freezes the page, prevents user interaction, and creates a bad user experience. The real fix is usually to stop thinking in terms of "block until it finishes" and instead structure the code so later steps run after the request resolves.

Why async: false Is the Wrong Goal

This older pattern blocks the browser until the response arrives:

1$.ajax({
2  url: "/api/user",
3  async: false
4});

That means:

• the page cannot repaint
• clicks and keyboard input are stalled
• slow networks make the app feel broken

So the right question is usually not "How do I block without async: false?" but "How do I sequence my logic without blocking the browser?"

Return a Promise and Chain the Next Step

$.ajax() already returns a jQuery promise-like object, so you can return it and run dependent code in then().

1function loadUser() {
2  return $.ajax({
3    url: "/api/user",
4    method: "GET",
5    dataType: "json"
6  });
7}
8
9loadUser()
10  .then(function(user) {
11    $("#name").text(user.name);
12    return $.ajax({
13      url: "/api/orders",
14      method: "GET",
15      data: { userId: user.id }
16    });
17  })
18  .then(function(orders) {
19    console.log("Orders loaded", orders);
20  })
21  .fail(function(xhr) {
22    console.error("Request failed", xhr.status);
23  });

This does not block the browser, but it does preserve the order of operations. The second request only runs after the first one succeeds.

Use async and await for Clearer Flow

If your environment supports modern JavaScript, you can wrap the jQuery request and write code that looks more linear.

1function getJson(url, data) {
2  return $.ajax({
3    url: url,
4    method: "GET",
5    data: data,
6    dataType: "json"
7  });
8}
9
10async function loadScreen() {
11  try {
12    const user = await getJson("/api/user");
13    $("#name").text(user.name);
14
15    const orders = await getJson("/api/orders", { userId: user.id });
16    console.log(orders);
17  } catch (error) {
18    console.error("Loading failed", error);
19  }
20}
21
22loadScreen();

This is still asynchronous, but it solves the original control-flow problem in a much cleaner way than nested callbacks or a synchronous request.

If You Need to Stop Submission or Navigation

Sometimes developers say "blocking AJAX" when they really mean "do not continue this action until the server responds." For example, when submitting a form, prevent the default action first, then continue in the success handler.

1$("#profile-form").on("submit", function(event) {
2  event.preventDefault();
3
4  $.ajax({
5    url: "/api/profile",
6    method: "POST",
7    data: $(this).serialize()
8  })
9  .done(function() {
10    window.location.href = "/profile/saved";
11  })
12  .fail(function() {
13    alert("Save failed");
14  });
15});

The user action is gated by the server response, but the browser is not frozen.

If You Need a Temporary UI Lock

Sometimes the real requirement is not a synchronous request but preventing duplicate clicks. In that case, disable the relevant UI and re-enable it when the request finishes.

1$("#save-button").on("click", function() {
2  const button = $(this);
3  button.prop("disabled", true);
4
5  $.ajax({
6    url: "/api/save",
7    method: "POST"
8  })
9  .always(function() {
10    button.prop("disabled", false);
11  });
12});

That gives you the practical effect many people wanted from "blocking" without harming the entire page.

Common Pitfalls

The most common mistake is trying to return the AJAX result from the outer function immediately:

1function loadValue() {
2  let value;
3  $.ajax({ url: "/api/value" }).done(function(data) {
4    value = data;
5  });
6  return value;
7}

This returns too early because the request has not finished yet. Return the promise instead.

Another mistake is mixing callbacks, jQuery Deferred methods, and async/await without a clear pattern. Pick one style and use it consistently.

Some developers also freeze the UI unnecessarily when a local loading indicator or disabled button would solve the real problem. Blocking the whole page is usually a sign that the interaction model needs to be rethought.

Summary

• There is no good modern way to do a truly blocking browser AJAX call without async: false.
• The correct replacement is usually promise chaining or async and await.
• If an action must wait for the server, continue it in the success path instead of freezing the UI.
• If you only need to prevent duplicate input, disable the relevant controls temporarily.
• Returning a promise is the key pattern for sequencing AJAX-dependent code cleanly.