how to wait untill a non-ajax function to finish and return value

Question

i have a function that return a success callback when it's the process succeed and a fail callback when the process failed .

the problem is how to wait the function untill it finished and get the returned value before continue to execute other code .

i tried to use the $.deffered, promise functions that provide jquery but it doesn't seems to work with non-ajax function .

this is how it looks like my function

function process(){
var picture = foo(parameters,callbackOnSuccess,callbackOnFail);
var picture1 = bar(parameters,callbackOnSuccess,callbackOnFail);
// wait untill the values are returned and do some code with picture and picture1 vars ...
}

function callbackOnSuccess(res){
return res.pictureID;
}

function callbackOnFail(error){
return error.message;
}

PS : i can't put my whole code on the CallbackOnSuccess as it's not a solution especially when i have a lot of function that i need to wait for .

Answer 1

jQuery deferred is the way to go for this. You need to create promise object with $.Deferred and resolve/reject them as per your requirement. I created a fiddle for the same. Hope it will help you :)

https://jsfiddle.net/gnekLssh/1/

If you see in the fiddle all the values are printed first and once the values are printed then the method will go to the success callback. And please dont go to the path of callback hell. We all can do better than that.

 $(document).ready(function() {
function success(data){
 alert('I am inside success');
 alert(data);
}

function failure(data){

 alert('I am inside failure');
 alert(data);
}

function always(){

 alert('I will always be called')
 }

 function demoPromise(){
        $.when(showPromiseSuccessMagic(true)).then(success,failure).always(always);
$.when(showPromiseSuccessMagic(false)).then(success, failure).always(always);


 }


function showPromiseSuccessMagic(isSuccess){
        alert('Inside showPromise');
    var deferred = $.Deferred();

  if(isSuccess){
    setTimeout(function(){
        alert('Starting countdown now');


      for(var counter =0; counter <10; counter ++){
        $("#counter").append(counter);
        alert(counter);
        if(counter == 9){
                alert('Now counter will stop and promise will resolve');
                            deferred.resolve('Resolved value goes here');

        }

      }

   }
   , 2000);
   }else{
      deferred.reject('Rejected Value goes here');
   }



   return deferred.promise();

 }

 function showPromiseFailureMagic(){
  var deferred = $.Deferred();
  deferred.reject('Rejected promise');
  return deferred.promise();

 }

 demoPromise();

});

<div id ="counter"></div>

Hope this be of some help.

Happy Learning

Vatsal

Answer 2

You want to process synchronously, not asynchronously. Try using async:false in the jQuery ajax function.

Answer 3

make the call synchronous. Code will wait for the response

var request = new XMLHttpRequest();
request.open('GET', '/bar/foo.txt', false);  // `false` makes the request synchronous
request.send(null);

if (request.status === 200) {
 console.log(request.responseText);
}

Source: https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests