Waiting for the response of a Javascript function

Question

Waiting for the response of a Javascript function

I have the code snippet below:

myFunc();
bar();

The function myFunc() initiates an ajax request.

I want to ensure that bar() is only executed after myFunc()'s ajax request has been completed.

However, I do not wish to move the call to bar() inside of myFunc.

Is this possible?

EDIT

Below is the revised code that addresses this issue:

var FOO = {
 init: function(blah)
 {
  // Callback functions to be passed when loading challenge data via AJAX
  var callbacks = {
   myFunc1: function(){ myFunc1(blah); },
   myFunc2: function(){ myFunc2(blah); },
  };

  this.bar(callbacks); // Load challenge data and set up the game
 },
 bar: function(callbacks) { ..iterate through and execute them.. }

};

javascript ajax

Answer 1

Answer №1

If you want to achieve the desired outcome, it is essential for bar() to establish communication with myFunc().

When expressing your preference against moving the call to bar() inside myFunc(), there are various ways to interpret this.

For instance, you have the option of turning bar() into a parameter of myFunc()

function bar() {
   // perform actions specific to bar()
}

function myFunc(callback) {
   // utilize the callback function in the xmlhtprequest object's onreadystatechange property
}

myFunc(bar)

I trust that this explanation proves useful to you

Sincerely, Jerome Wagner

Answer 2

If you want to achieve the desired outcome, it is essential for bar() to establish communication with myFunc().

When expressing your preference against moving the call to bar() inside myFunc(), there are various ways to interpret this.

For instance, you have the option of turning bar() into a parameter of myFunc()

function bar() {
   // perform actions specific to bar()
}

function myFunc(callback) {
   // utilize the callback function in the xmlhtprequest object's onreadystatechange property
}

myFunc(bar)

I trust that this explanation proves useful to you

Sincerely, Jerome Wagner

Answer 3

Answer №2

Adding a flag to signal the completion of myFunc() is possible, but it's not recommended. Instead, best practice is to utilize callbacks.

Consider trying out this code:

var requestSuccess = false;
myFunc(); // set requestSuccess to true upon successful response

var pollingInterval = setInterval(function() {
    if (requestSuccess) {
        clearInterval(pollingInterval);
        executeCallback();
    }
}, 100);

Answer 4

Adding a flag to signal the completion of myFunc() is possible, but it's not recommended. Instead, best practice is to utilize callbacks.

Consider trying out this code:

var requestSuccess = false;
myFunc(); // set requestSuccess to true upon successful response

var pollingInterval = setInterval(function() {
    if (requestSuccess) {
        clearInterval(pollingInterval);
        executeCallback();
    }
}, 100);

Answer 5

Answer №3

Sorry, it's not feasible unless you opt for a synchronous request, but that would no longer fall under AJAX. I highly advise against this approach as it will cause the UI to freeze until the request finishes, resulting in a poor user experience due to browser freezing.

Answer 6

Sorry, it's not feasible unless you opt for a synchronous request, but that would no longer fall under AJAX. I highly advise against this approach as it will cause the UI to freeze until the request finishes, resulting in a poor user experience due to browser freezing.

Answer 7

Answer №4

Unfortunately, that won't work.

If you attempt to accomplish it by using a SJAX request instead of AJAX, the browser will freeze up as a consequence - so it's not recommended at all.

Embrace event driven programming while working within an event driven environment for better outcomes.

Answer 8

Unfortunately, that won't work.

If you attempt to accomplish it by using a SJAX request instead of AJAX, the browser will freeze up as a consequence - so it's not recommended at all.

Embrace event driven programming while working within an event driven environment for better outcomes.

Waiting for the response of a Javascript function

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

What is the best way to halt a CSS transition using JavaScript when dealing with an image?

Transferring files with Node.js via UDP connections

Exploring AngularJS JSON Parsing Techniques (such as utilizing ng-repeat)

What steps do I need to take to set up CORS properly in order to prevent errors with

Get information collectively in node.js

Origin Access-Control-Allow Not Recognized

Can I apply a universal babel configuration across all of my personal projects?

Matching numbers that begin with zero or are completely optional using Regex

Issues with Bootstrap Navigation Collapse Utilizing Data Attributes

Issues with functionality of an HTML form select utilizing jQuery

Is there a way to retrieve the initial value from the second element within the JSON data?

Confusion arises between Bootstrap button plugin and Vue checkbox click event

Access numerous data points using ajax and php, sans the need for Jquery

Utilize three.js within a Google web app script - unable to incorporate the script module type for loading three.js

Converting Numerical Formats into Numbers: A Step-By-Step

Duplicate an $sce generated entity and adjust its content

Attempt to implement the Woocommerce cart update link using Timber after performing an Ajax request

Identify the mistake using the callback function

JS asynchronous function failing to update variable

Building a Multi-Language React Application with Real-Time Data