Join thread in JavaScript

Question

Join thread in JavaScript

Probably asked before, but after the serious searching I'm still not able to find a proper solution. Please consider something like this:

function compute() {
  asyncCall(args, function(err, result) {
  });
  /* 'join thread here' */
}

Even though asyncCall is asynchronous I'd like to use the result and return it from the function compute synchronously. asyncCall is a library call and I can't modify it in any way.

How to wait properly for the asynchronous result without setTimeout and watching a conditional variable? This is possible but suboptimal.

javascript
node.js

Answer 1

not sure how you can really use something that doesn't exist yet, but it's easy enough to return a slot where the result will be:

function compute() {
 var rez=[];
  asyncCall(args, function(err, result) {
    rez[0]=result;
    if(rez.onchange){ rez.onchange(result); }
  });
  /* 'join thread here' */
 return rez;
}

now, you can refer to the [0] property of the return, and once the callback comes in, compute()[0] will have the result. It will also fire an event handler you can attach to the returned array that will fire when the data updates inside the callback.

i would use something more formal like a promise or secondary callback, but that's me...

EDIT: how to integrate a callback upstream:

// sync (old and busted): 
function render(){
  var myView=compute();
  mainDiv.innerHTML=myView;
}

//async using my re-modified compute():
function render(){
  var that=compute();
  that.onchange=function(e){ mainDiv.innerHTML=e; }
}

see how making it wait only added a single wrapper in the render function?

Answer 2

There's no await syntax in browsers that is widely available. Your options are generally limited to Callback patterns or Promises.

NodeJS follows a callback pattern for most async methods.

function someAsyncMethod(options, callback) {
  //callback = function(error, data)
  // when there is an error, it is the first parameter, otherwise use null
  doSomethingAsync(function(){
    callback(null, response);
  });
}

....
someAsyncMethod({...}, function(err, data) {
  if (err) return alert("OMG! FAilZ!");

  // use data
});

Another common implementation is promises, such as jQuery's .ajax() method...

var px = $.ajax({...});
px.data(function(data, xhr, status){
  //runs when data returns.
});
px.fail(function(err,xhr, status){
  //runs when an error occurs
});

Promises are similar to events...

Of the two methods above, the callback syntax tends to be easier to implement and follow, but can lead to deeply nested callback trees, though you can use utility patterns, methods like async to overcome this.