Can Asynchronous JavaScript Functions Be Executed Synchronously Without Freezing the UI?

Synchronous Execution of Asynchronous JavaScript Functions

In certain situations, it may be necessary to execute asynchronous JavaScript functions synchronously, but without freezing the UI. While this is generally not considered good practice, there are specific cases where it may be deemed necessary.

The Challenge

The goal is to block the function until the callback is called, without freezing the UI. This presents a challenge because blocking JavaScript typically results in UI freezes.

Possible Solution

One possible solution involves using polling to check a global variable that is set by the callback. Here's an example:

function doSomething() {

  // Callback sets received data to a global variable
  function callBack(d) {
    window.data = d;
  }

  // Start the async
  myAsynchronousCall(param1, callBack);
}

// Start the function
doSomething();

// Clear the global data
window.data = null;

// Poll at an interval until data is found in the global
var intvl = setInterval(function() {
  if (window.data) {
    clearInterval(intvl);
    console.log(data);
  }
}, 100);

This approach allows the calling function to block until the data is received from the callback, without freezing the UI. However, it assumes that the doSomething() function can be modified to use the global variable.

Best Practice

It's important to note that this approach is considered a suboptimal solution. Ideally, asynchronous calls should be handled using callbacks or promises, rather than blocking the function. However, it may be necessary as a temporary workaround in certain codebases that cannot be easily modified.

The above is the detailed content of Can Asynchronous JavaScript Functions Be Executed Synchronously Without Freezing the UI?. For more information, please follow other related articles on the PHP Chinese website!