jQuery wait till function finishes

Question

I have this script:

var d;
$(".circle").click(function() {
    var id = $(this).attr('id');
    var MyDiv1 = document.getElementById(id);
    var name = MyDiv1.innerHTML;

    $.get("url", function(data){
    d=data;
    });

    d=d.split(",");
    var arrayLength = d.length;
    for (var i = 0; i < arrayLength; i++) {
        if(i==id)
         custom_alert(d[i], name);
    }
});

I want to call

d = d.split(",");

Only after I'm sure d isn't undefined.
How do I execute that after the $.get functions finishes and d is assigned to the data?

Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — freedomn-m, Jun 14 '17 at 12:52

Jonas Wilms · Accepted Answer · 2017-06-14T13:28:20.110

3

You could simply put it into the callback? :

    $.get("url", function(d){
         d=d.split(",");
         var arrayLength = d.length;
         for (var i = 0; i < arrayLength; i++) {
           if(i==id)
            custom_alert(d[i], name);
         }
    });

Or using ES7 (very new stuff) :

(async function(){
var d=await new Promise(function(r){
  $.get("url",r);
});
d=d.split(",");
...
})();

edited Jun 14 '17 at 13:28

answered Jun 14 '17 at 12:51

Jonas Wilms

132,000
20
149
151

score 2 · Answer 2 · answered Jun 14 '17 at 12:52

You need to put the JS that depends on d being defined inside the get callback.

var d;
$(".circle").click(function() {
var id = $(this).attr('id');
var MyDiv1 = document.getElementById(id);
var name = MyDiv1.innerHTML;

$.get("url", function(data){
d=data;

   d=d.split(",");
   var arrayLength = d.length;
   for (var i = 0; i < arrayLength; i++) {
    if(i==id)
     custom_alert(d[i], name);
   }
 });
});

besciualex · Answer 3 · 2017-06-14T12:58:31.983

jQuery.get() is asynchronous because it is a shorthand for jQuery.ajax() who's default option for requests is async: true.

Read here about asynchronous requests.

// declare it here if you need its values later (to be a global variable), or move it inside function(){ } declared inside $.get() call.
var d;
$(".circle").click(function() {
    var id = $(this).attr('id');
    var MyDiv1 = document.getElementById(id);
    var name = MyDiv1.innerHTML;

    $.get("url", function(data){
         d=data;
         // $.get has an asynchronous answer (you don't know when it will come or if it comes). Call d.split here
         d=d.split(",");
         var arrayLength = d.length;
         for (var i = 0; i < arrayLength; i++) {
             if(i==id)
              custom_alert(d[i], name);
        }
    }); 
 });

score 1 · Answer 4 · answered Jun 14 '17 at 12:55

You can only rely on d to have a value in the block where it is assigned a value, which is inside the callback function(data){...}.

var d;
$(".circle").click(function() {
  var id = $(this).attr('id');
  var MyDiv1 = document.getElementById(id);
  var name = MyDiv1.innerHTML;

  $.get("url", function(data){
    d=data.split(",");
    var arrayLength = d.length;
    for (var i = 0; i < arrayLength; i++) {
      if (i==id)
        custom_alert(d[i], name);
    }
  });
});

jQuery wait till function finishes

4 Answers4