how to stop one method execution untill another method completes in javascript with Linkedin API people search?

Question

I am calling IN.API.PeopleSearch() from a for loop, and this for loop is in ajax success method, but before completing for loop execution, ajax method complete is getting called.

I want to stop until the for loop completes.

$.ajax({
        type: 'GET',
        dataType: 'json',
        url: "get_data.htm",
        async : false,
        success: function(data, textStatus ){
            for(i in data){
                searchClick(data[i].firstName,data[i].lastName);
                }
                alert(resultArray);//here i want to send the response to server side
            }
        },
        error: function(xhr, textStatus, errorThrown){
           alert('request failed');
        }
      });

here is my searchClick function :

function searchClick(firstName, secondName) {
  if (!IN.ENV.auth.oauth_token) {
    alert("You must login w/ LinkedIn to use the Search functionality!");
    return;
  }

  IN.API.PeopleSearch()
      .fields("id", "firstName", "lastName","emailAddress","headline","industry","pictureUrl","positions",
            "summary","numConnections")
    .params({
      "first-name": firstName,
      "last-name": secondName
    })
    .result(function(result, metadata) {

    for (i in result.people.values) {
          try{
              resultArray[i] = result.people.values[i];
          }catch(err){
              alert(err);
              }
    }

    });
}

alert(resultArray) is getting called before completion of for loop, how to handle this.

Answer 1

I don't know if I get your question, but maybe something like that works for you: (not tested)

var Queue = function(callback) {
  this.count = 0;
  this.done = 0;
  this.callback = callback;
};

Queue.prototype.oneDone = function() {
  if (++this.done == this.count) {
    this.callback();
  }
}

Queue.prototype.process = function(data, callback) {
  this.count = data.length;

  for (i in data ) {
    callback(data[i], this);
  }
};

$.ajax({
  type: 'GET',
  dataType: 'json',
  url: "get_data.htm",
  async : false,
  success: function(data, textStatus) {
    var myQueue = new Queue(function() {
      alert(resultArray); //here i want to send the response to server side
    });
    myQueue.process(data, function(item, queue) {
      searchClick(item.firstName, item.lastName, queue);
    });
  },
  error: function(xhr, textStatus, errorThrown){
    alert('request failed');
  }
});

---

function searchClick(firstName, secondName, queue) {
  if (!IN.ENV.auth.oauth_token) {
    alert("You must login w/ LinkedIn to use the Search functionality!");
    return;
  }

  IN.API.PeopleSearch()
    .fields("id", "firstName", "lastName","emailAddress","headline","industry","pictureUrl","positions",
            "summary","numConnections")
    .params({
      "first-name": firstName,
      "last-name": secondName
    })
    .result(function(result, metadata) {
      for (i in result.people.values) {
        try {
          resultArray[i] = result.people.values[i];
        } catch(err) {
          alert(err);
        }
      }
      if (queue) {
        queue.oneDone();
      }
    });
  }

Answer 2

I don't know what you are doing exactly, but can say we have one method, async

    Function.prototype.async = function () {
        setTimeout.bind(null, this, 0).apply(null, arguments);
        };

This allows me to write code like this:

   alert.async("This will be displayed later.");
   alert("This will be displayed first.");

so the code with .async will called once the other event is completed.

---

Else in your case, use

 if(xmlhttp.readyState == 4 && xmlhttp.status == 200)

for checking if the document is ready then send /fill /success. this is Raw AJAX method. :)

O hope this may help :)