Making a javascript function async with callback

Question

Previously I had

 MyClass.prototype.method1 = function(data1) {
    return this.data111.push(data1);
  };

 MyClass.prototype.method2 = function(i) {
    var data = this.method1(i);
    if (data.condition1 != null) {
      data.onEvent1(this);
    }
    return $(data.element).someMethod123("data123");
  };

 MyClass.prototype.method3 = function() {
    var data1 = this.method1(this._data1);
    return this.someMethod123(step.data1);
  };

MyClass.prototype.ended = function() {
    return !!this.getState("end");
  };


MyClass.prototype.getState = function(key) {
    var value = $.cookie(key);
    this._options.afterGetState(key, value);
    return value;
  };

How do I make async using callback functions? I guess it should be so:

 MyClass.prototype.method1 = function(data1, callback) {
    if(callback){
      callback(this.data111.push(data1));
    }
    else{
      return this.data111.push(data1);
   }
  };

 MyClass.prototype.method2 = function(i, callback) {

    var data = this.method1(i);
    if (data.condition1 != null) {
      data.onEvent1(this);
    }
    if(callback){
      callback($(data.element).someMethod123("data123"));
    }
    else{
     return $(data.element).someMethod123("data123");
    }
  };

 MyClass.prototype.method3 = function(callback) {
    var data1 = this.method1(this._data1);
     if(callback){
      callback(this.someMethod123(step.data1));
    }
    else{
       return this.someMethod123(step.data1);
    }
  };

MyClass.prototype.ended = function(callback) {
    if(callback){
       callback(!!this.getState("end", /*what should be here and what should it does?*/));
    }
  };


  MyClass.prototype.getState = function(key, callback) { 
    var oldThis = this;
    setTimeout(function(){ 
                    value = $.cookie(key);
                    callback(value, oldThis); 
                    oldThis._options.afterGetState(key, value);
                  },
              0);
  };

I definitely have missed something because I never used async functions in javascript before. So it that?

And, as I understood, to make a functions async, I basically should add one more parameter as a callback function and get rid of return, should not I?

But not all of these methods do ajax, do they? Please show it in your code where you use ajax (no need for actual code, but a simple function ajax(…, callback)) — Bergi
– Bergi, Commented Jan 29, 2013 at 11:41
@Bergi, instead of setTimeout in getState there will be ajax request. — Alan Coromano
– Alan Coromano, Commented Jan 29, 2013 at 14:22

Felix Kling · Accepted Answer · 2013-01-29 11:34:35Z

1

Just pass on the callback:

MyClass.prototype.ended = function(callback) {
    this.getState("end", callback);
};

You should do this in your other functions too and I'd suggest to stick to one interface. I.e. either return the value directly (if possible) or use callbacks.

answered Jan 29, 2013 at 11:34

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

Sign up to request clarification or add additional context in comments.

8 Comments

Alan Coromano Over a year ago

For instance, if I call somewhere if(this.ended(/* what should I do here?*/)) { .... }, how do I handle it?

Felix Kling Over a year ago

Since .ended does not return a value, you would call the function this this.ended(function(result) { /* do something with result*/ });. The way you write your code changes when you use callbacks.

Alan Coromano Over a year ago

it does return the value, look at my first example.

Felix Kling Over a year ago

Yes, if you don't use callbacks it does. But not when you use callbacks... did you even see my code? ;) You cannot return a value form a function which calls a function that needs a callback and is async. If you use callbacks, you have to use them all the way through.

Alan Coromano Over a year ago

Can I return value from this code:

setTimeout(function(){                      value = $.cookie(key);                     callback(value, oldThis);                      return oldThis._options.afterGetState(key, value);                   },               0);

?

|

Bergi · Accepted Answer · 2013-01-29 15:49:34Z

1

Only those methods that do asynchronous tasks need callback style. There is no reason to use it for method1, method2 and method3.

getState now is the actual asynchronous method. Using ajax/setTimeout/whatever is quite obvious in here. Yet, I can spot one mistake: The callback call should always be the last statement, just as you won't do anything after a return statement. Even though you can, better call back after setting the internal options object:

                …
                oldThis._options.afterGetState(key, value);
                callback(value, oldThis);

Now, the ended method. Since it uses the async getState, it will become asynchronous itself and you need to use callback style (notice that getState() will not return the value). So you will call getState, and when that calls back you will transform the result and pass it to your own callback:

MyClass.prototype.ended = function(callback) {
    this.getState("end", function ownCallback(state) {
        var result = !!state; // or whatever you need to do
        callback(result);
    });
};
// and if you don't need to do anything with the result, you can leave out ownCallback:
MyClass.prototype.ended = function(callback) {
    this.getState("end", callback);
};

answered Jan 29, 2013 at 15:49

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

5 Comments

Alan Coromano Over a year ago

Great explanation! why is it better to raise the "event" afterGetState before callback? I won't work properly because it will be raised before the state has been gotten.

Alan Coromano Over a year ago

<<Only those methods that do asynchronous tasks need callback style. There is no reason to use it for method1, method2 and method3.>> Why did you add callback parameter for MyClass.prototype.ended = function(callback) then? I only want to do return !!this.getState("end"); there, how can I do that?

Bergi Over a year ago

@AlanDert: Oh, it's an event? Then it might be OK. However, the callback function is quite like an event handler, and handlers should in general not depend on each other.

Bergi Over a year ago

@AlanDert: Why ended has a callback? Because it is asynchronous - it uses the async getState!

Alan Coromano Over a year ago

It's clear now. So what if I want to call this.ended(/*....*/), what should put there as a callback parameter?

Collectives™ on Stack Overflow

Making a javascript function async with callback

2 Answers 2

8 Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

8 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related