Why is this javascript function async??

Question

I just want to call a function and get a true/false and depending on that set a button to enabled/disabled.. but instead it skips right over the function before the function finished!! I am a C# guy so I have a feeling I am trying to do things the c# way in javascript and its not correct

   if (IsTasksExists()) {
        $("#divValidateUnprocessData").button("enable");
    }
    else {
        $("#divValidateUnprocessData").button("disable");

    }

});

function IsTasksExists() {
    $.ajax(
   {
       type: 'POST',
       url: 'http://localhost:7000/ManualProcess/CheckTasksToValidateAJAX',
       success: function (response) {
           if (response.Status == 'OK') {
               if (response.TasksToValidate == 0) {
                   //  $("#divValidateUnprocessData").button("disable");
                   return false;
               }
               else {
                   return true;
               }
           }
           else {
               alert('error');
           }
       }
   });
}

It takes time for the browser to make the request to the url, during said time, execution continues. When the browser has successfully made the request, which may be milliseconds or may be minutes, the callback will fire. — zzzzBov, Jun 21 '13 at 17:16
It’s asynchronous because the A in AJAX stands for “asynchronous”. — Ry-, Jun 21 '13 at 17:16
`"I am a C# guy so I have a feeling I am trying to do things the c# way"` - As a C# guy you might want to get a handle on asynchronous operations. It's kind of a big thing right now in C#. — David, Jun 21 '13 at 17:16
Even if the call wasn't asynchronous, it still wouldn't work because you're returning from a callback function, not from your `IsTasksExists()` function. — , Jun 21 '13 at 17:18
When you call 'IsTasksExists', a POST request is made. When the response from the server comes ( and if it's successful ), the anonymous function you assigned to success: will be called. So when you call IsTasksExists(), you don't get true or false back. Look at this instead ---> http://jsfiddle.net/blackjim/vPUKD/1/ — AntouanK, Jun 21 '13 at 17:19
I thought that the ajax call was async.. but the call to the function itself is not async? — punkouter, Jun 21 '13 at 17:26
But the ajax call is inside the regular NON ASYNC function so I assumed therefore I can ignore that there is an ajax call inside it ? — punkouter, Jun 21 '13 at 17:31
Thanks antonis.. I used that.. it works and seems to be easier to read than the main answer.. though I suppose I should change the title of the function from IsTasksExists to SetValidationButton ? — punkouter, Jun 21 '13 at 17:41

score 1 · Accepted Answer · answered Jun 21 '13 at 17:20

1

Here's the pattern to properly wait for the callback:

IsTaskExists(function(exists){
  if (exists) {
    $("#divValidateUnprocessData").button("enable");
  } else {
    $("#divValidateUnprocessData").button("disable");
  }
});

function IsTasksExists(callback) {
  $.ajax( {
    type: 'POST',
    url: 'http://localhost:7000/ManualProcess/CheckTasksToValidateAJAX',
    success: function (response) {
      if (response.Status == 'OK') {
        if (response.TasksToValidate == 0) {
          callback(false);
        } else {
          callback(true);
        }
      } else {
        alert('error');
        callback(false);
      }
    }
  });
};

answered Jun 21 '13 at 17:20

Plato

10,812
2
41
61

So is this basically the same idea as c# callbacks ? You create an event listener and wait to be called.. – punkouter Jun 21 '13 at 17:36
1

Correct, you declare your async function `IsTasksExists` and when you call it, you pass a function `callback` to it. The callback is not executed immediately, instead you must explicitly call the callback from within `IsTasksExists` after you have completed your asynchronous task. (`return` doesn't do that.) The callback function is often defined inline when you call the async function, like here in line 1. – Plato Jun 21 '13 at 18:26

Why is this javascript function async??

1 Answers1