How to handle multiple callbacks in JavaScript

Question

How can i handle multiple callbacks? Right now only the first one i register gets fired..

Here is my current code for handling the callbacks (this code is being loaded async)

var widget = function () {
    var onNameCallback,
    onTriggedCallback;    


    function getName(callback) {
        onNameCallback = callback;
    }

    function onTrigg(callback) {
        onTriggedCallback = callback;
    }


    /** lots of code ... **/


    if(typeof onNameCallback == 'function') {
        // Fire the callback
        onNameCallback('1');
    }   

    if(typeof onTriggedCallback == 'function') {
        // Fire the callback    
        onTriggedCallback('hello');
    }   


    /** lots of code ... **/    

    return {
       getName:getName,
       onTrigg:onTrigg,
    };
}();

if (window._test) {
    for (var i = 0; i < _test.length; i++) {        
        var method = _test.shift();
        try {
            widget[method].apply(widget, _test);
        } catch (err) {
            console.log(err);
        }
        var method = _test.shift();
    }
};

And here is how i register them:

_test.push('getName', function(data) {
    console.log(data);
}); 

_test.push('onTrigg', function(data) {
    console.log(data);
});

But for some reason only getName is fired..

Any ideas?

The way you set up your code, _test will contain the elements ['name', function, 'name', function]. The code I wrote to one of your previous questions (which uses shift) was under the assumption that every element of _test is an array itself. To make it work with in your case, you would have to find the next method name in the array, remove all elements up to then and pass them as second argument to .apply, e.g. _test.splice(0, index_of_next_method_name). If you only pass one argument to the method, that's not a problem, otherwise using an array of arrays is easier. — Felix Kling
– Felix Kling, Commented Aug 20, 2013 at 16:25
That method worked perfect until i had to add callbacks, but the above works with and without callbacks only prob is that i cannot use more than 1 callback — Alosyius
– Alosyius, Commented Aug 20, 2013 at 16:26
Would it be possible to use the "every call is an array within itself" method even though i am using callbacks? Would that solve so that both callbacks are fired? — Alosyius
– Alosyius, Commented Aug 20, 2013 at 16:29
Like so: ['getName', function(data) {...}]. A function is just like any other value. I think overall it would be easier for you if you read some JavaScript tutorials (e.g. eloquentjavascript.net), so that you are familiar with these basics. It would be more fruitful than asking a bunch of SO questions (and wait for answers). — Felix Kling
– Felix Kling, Commented Aug 20, 2013 at 16:32

Guffa · Accepted Answer · 2013-08-20 16:35:17Z

The main problem with the code is that you are counting i up while you are shifting items from the array so that the length of the array gets smaller. You will be looping through half of the items in the array. Instead just loop while there is anything left in the array.

Also, you are shifting the method name twice from the array and ignoring one (which actually is the handler), while you are using apply to call the method and sending all remaining items in the array as parameters. This actually doesn't keep the code from working, but it's hard to follow what it actually wants to accomplish. Shift both values from the array, and use the call method to call the method with a single parameter.

if (window._test) {
  while (_test.length > 0) {
    var method = _test.shift();
    var handler = _test.shift();
    try {
        widget[method].call(widget, handler);
    } catch (err) {
        console.log(err);
    }
  }
}

Edit:

If you want to have each callback in an array, just shift that from the _test array:

if (window._test) {
  while (_test.length > 0) {        
    var callback = _test.shift();
    try {
        widget[callback[0]].call(widget, callback[1]);
    } catch (err) {
        console.log(err);
    }
  }
}

Alosyius · Accepted Answer · 2013-08-20 16:36:31Z

0

I added the callbacks into arrays like:

_test.push(['getName', function(data) {
    console.log(data);
}]); 

_test.push(['onTrigg', function(data) {
    console.log(data);
}]);

And modified:

if (window._test) {
    for (var i = 0; i < _test.length; i++) {        
        var method = _test[i].shift();
        try {
            widget[method].apply(widget, _test[i]);
        } catch (err) {
            console.log(err);
        }
    }
};

Works great now!

Thanks FelixKling!

answered Aug 20, 2013 at 16:36

Alosyius

9,19126 gold badges79 silver badges121 bronze badges

Collectives™ on Stack Overflow

How to handle multiple callbacks in JavaScript

2 Answers 2

Edit:

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Edit:

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related