CODEWITHSUNDEEP
javascriptcallbackxmlhttprequest
kDeveloper
kDeveloper

Reputation: 13

Callback of function stocked in an object

I need to do a sequential XMLHttpRequest requests (FIFO) to not to call the server with many requests a same time, I wrote this function that do the XMLHttpRequest sequentially:

var queue = [];
var xmlHttpCurrentlyOccuped = false;


function loadUserDetails() {
  var url = "https://someurl.com";
  doWebRequest("GET", url, "", parseUserDetails);
}


function parseUserDetails(dataFromServer){

  Console.log("data received from server: "+JSON.stringify(dataFromServer));

}


function doWebRequest(method, url, params, callback) {
    var parametres = new Object();
    parametres.myMethod = method;
    parametres.myUrl = url;
    parametres.myParams = params;
    parametres.myCallback = callback;

    queue.push(parametres);

    while (queue.length>0 && !xmlHttpCurrentlyOccuped){
      var doc = new XMLHttpRequest();
      doc.onreadystatechange = function() {
                var status;
                if (doc.readyState == XMLHttpRequest.LOADING || doc.readyState == XMLHttpRequest.OPENED){
                    xmlHttpCurrentlyOccuped = true;
                }

                if (doc.readyState == XMLHttpRequest.DONE && doc.status == 200) {
                    xmlHttpCurrentlyOccuped = false;
                    var data;
                    var contentType = doc.getResponseHeader("Content-Type");
                    data = doc.responseText;
                    queue[0].myCallback(data);
                    queue.shift();
                }

                else if (doc.readyState == XMLHttpRequest.DONE) {
                    xmlHttpCurrentlyOccuped = false;
                    status = doc.status;
                    if(status!=200) {
                        parseTheError(url);
                    }
                    queue.shift();
                }
            }
    doc.open(queue[0].myMethod, queue[0].myUrl);
    doc.send();
   }
}

My problem is, after the XMLHttpRequest is done well, the callback function is not working in this line of my code queue[0].myCallback(data);I have this error: "queue[0].callback(data): undefined".

Any idea to resolve this issue?

Update: I resolved the issue, this is my working code maybe it can help someone:

var queue = [];


function doWebRequest(method, url, params, callback) {
  var parametres = new Object();

  parametres.myMethod = method;
  parametres.myUrl = url;
  parametres.myParams = params;
  parametres.myCallback = callback;
  if (queue.length>0) {if (queue[queue.length-1].url != parametres.url) queue.push(parametres);}
  else queue.push(parametres);

  var doc = new XMLHttpRequest();

  function processNextInQueue() {
    if (queue.length>0){
        var current = queue.shift();
        doc.onreadystatechange = function() {
                  if (doc.readyState == XMLHttpRequest.DONE){
                        if(doc.status == 200) {
                            if(typeof current.myCallback == 'function'){
                                current.myCallback(doc.responseText)
                            } else {
                                console.log('Passed callback is not a function');
                            }
                            processNextInQueue();
                        }
                        else if(doc.status!=200) {
                            parseTheErrors(current.myUrl);
                        }
                    }
                }
        doc.open(current.myMethod, current.myUrl);
        doc.send();
    }
  }
processNextInQueue();
}

Thank you guys for your help ;)

Upvotes: 1

Views: 91

Answers (2)

jfriend00
jfriend00

Reputation: 707258

You can't poll in javascript with a while loop like this and expect proper performance. Javascript is single threaded so when you poll like this, you don't allow any cycles for other things to happen. You need to learn how to write asynchronous code where you start the first ajax call and then return. When that first one completes, you then start the second one and so on.

Here's a way to do this:

queue.push(parametres);

function processNextInQueue() {
    if (queue.length) {
        var doc = new XMLHttpRequest();
        doc.onreadystatechange = function() {
            if (doc.readyState == XMLHttpRequest.DONE) {
                if (doc.status == 200) {
                    queue[0].myCallback(doc.responseText);
                } else {
                    fonctionPourAnalyserLErreur(url);
                }
                // done now so remove this one from the queue 
                // and start the next one
                queue.shift();
                processNextInQueue();
            }
        }
        doc.open(queue[0].myMethod, queue[0].myUrl);
        doc.send();
    }
}

processNextInQueue();

The idea is that you fire off the first ajax call and then you just return. When the readystatechange shows it is done, you process the results and then fire off the next one. All the while the ajax call is in process, the javascript engine is free to service other events and do other things (that's the key to handling an asynchronous operation like an ajax call).

Upvotes: 1

Rob M.
Rob M.

Reputation: 36511

In this line: queue[0].myCallback(data), for debugging purposes (and to prevent errors from breaking your site) I would change to the following:

var current = queue.shift();
if(typeof current.myCallback == 'function'){
    current.myCallback(data)
} else {
    // for now, log it
    console.log('Passed callback is not a function');
}

Also, have you tried just passing an anonymous function to make sure it's not a scope/function hoisting issue?

function loadUserDetails() {
  var url = "https://someurl.com";
  doWebRequest("GET", url, "", function(dataFromServer){
       console.log("data received from server: "+JSON.stringify(dataFromServer));   
  });
}

Upvotes: 0

Related Questions