CODEWITHSUNDEEP
javascriptjqueryajax
Alan Coromano
Alan Coromano

Reputation: 26048

Making a javascript function async with callback

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?

Upvotes: 0

Views: 429

Answers (2)

Bergi
Bergi

Reputation: 665545

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);
};

Upvotes: 1

Felix Kling
Felix Kling

Reputation: 817208

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.

Upvotes: 1

Related Questions