Nested callback in javascript

Question

In my program, I have declared an object myObject like this :

function myObject()
{
  this.start=start; 
  function start(callbackFunction)
  {
    // Do something with callbackFunction
   }
}

In my main() method, I create objects and I want to start nested callback like this :

var myObject1 = new myObject();
var myObject2 = new myObject();

var list = [];
list.push(myObject1);
list.push(myObject2);      

var result = function() {};
var obj;
for (var i=list.length-1; i>=0; i--) {
  obj = list[i];        
  result = function() { obj.start(result);}
}  
result();  // I want to do myObject1.start(myObject2.start)); e.g. a nested callback

I don't understand why it doesn't work.

How can I correct my code ?

hazerd · Accepted Answer · 2013-10-23 13:56:58Z

1

The result variable is redefined after each iteration.

Your need to set your function like so :

var myObject1 = new myObject();
var myObject2 = new myObject();

var list = [];
list.push(myObject1);
list.push(myObject2);      

var result= function() {};
for (var i=list.length-1; i>=0; i--) {
    var obj = list[i];
    result = obj.start.bind(obj, result);
}  
result();

Using the bind method will force the state of the variable to be saved at each iteration.

edited Oct 23, 2013 at 13:56

answered Oct 23, 2013 at 13:23

hazerd

5924 silver badges6 bronze badges

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

2 Comments

Tibos Over a year ago

You are right about the problem, but the solution doesn't work. The original code used functions with no parameters as callbacks, you use functions with 1 parameter. If myObject uses the callback as callback(), then the first call will be ok (it will be function(){}()), but the second call will not be ok (it will be undefined()).

Scanpat Over a year ago

Yes ! That's perfect !

Tibos · Accepted Answer · 2013-10-23 13:48:41Z

The problem is that you are not using closures properly.

In your for loop you declare a function that uses a variable from the outer scope (result). When the for loop ends, the result variable will contain the last function defined, instead of the one defined at step i, as you would expect.

One solution as you so very well hinted in a comment is recursivity:

function myObject(name)
{
  this.name = name;
  this.start= function(callbackFunction) {
    console.log(this.name);
    // Do something with callbackFunction
    callbackFunction();
   };
}

var myObject1 = new myObject(1);
var myObject2 = new myObject(2);

var list = [];
list.push(myObject1);
list.push(myObject2);      

var runner = function(list, currentIndex) { // recursive function
  if (currentIndex < 0) return function(){ console.log('INITIAL');};
  return function(){ 
    list[currentIndex].start(runner(list, currentIndex-1));
  };
};

runner(list, list.length-1)();

DEMO: http://jsbin.com/ukeBUweG/2/edit

One last note, the solution above tries to stay true to your initial code. It is not

obj1.start(obj2.start(function(){}))

, but

function(){ obj1.start(function(){ obj2.start(function(){}) })}();

Collectives™ on Stack Overflow

Nested callback in javascript

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related