Callbacks for the same function

Question

I want to call a function a number of times providing it with different input on each occasion, however i am trying to ensure the next function call is triggered after the previous one has finished.

for example:

func(1,2);
func(9,3);
func(6,4);
func(5,6);

I have seen callback be coded like;

function1(someVariable, function() {
          function2(someOtherVariable);
        });

But this only works when calling a second function, i tried chaining the functions but this only allows me to run a set number of functions.

Is there a way i can apply some kind of call back to the same function?

note:: the function just adds a class.

func(x, y){
   $("#block").addClass("class");
    setTimeout(function(){ 
         $("#block").removeClass("class");
     },1000);
};

`I want to call a function a number of times providing it with different input on each occasion, however i am trying to ensure the next function call is triggered after the previous one has finished.` => That's exactly what the first 4 lines of code you have shown do => they execute the same function with different arguments and they do this sequentially => the next call is not executed until the previous completes. — Darin Dimitrov, Jun 24 '12 at 13:08
Ok there is a delay within the function, the later calls do no wait for the previous one to finish. — Lunar, Jun 24 '12 at 13:09
Do those delays provide you with callbacks? How are they implemented? To what are due those delays? Are you talking about some asynchronous processing such as an AJAX call? If so please describe in more details what this `func` does. — Darin Dimitrov, Jun 24 '12 at 13:09
I have added an example function, the parameters can be ignored. — Lunar, Jun 24 '12 at 13:11
Can you modify the `func` function? Do you have control over it? — Darin Dimitrov, Jun 24 '12 at 13:12
http://stackoverflow.com/questions/483073/getting-a-better-understanding-of-callback-functions-in-javascript — sabithpocker, Jun 24 '12 at 13:12
yeah i can modify it, i just want them to work as a sequence. — Lunar, Jun 24 '12 at 13:13
In that case, call the call back from inside the setTimeout, so the second function will be called once setTimeout is called after 1000ms and class is removed — sabithpocker, Jun 24 '12 at 13:13
@sabithpocker there is no second function it is the same function, also i might call this function 100 time.. this would require a callback for each function? — Lunar, Jun 24 '12 at 13:15

score 4 · Accepted Answer · edited Jun 24 '12 at 13:32

function func(x,y,callback) {
    console.log(x,y);
   $("#block").addClass("class");
    setTimeout(function(){ 
         $("#block").removeClass("class");
         callback();
     },1000);
};

var params = [
    [1,2],
    [9,3],
    [6,4],
    [5,6]
], i = 0;

function fn() {
    if( params[i] ) {
        func( params[i][0], params[i++][1], fn );
    }
}

fn();

Will go as long as there are params left.

Fiddle : http://jsfiddle.net/sabithpocker/dQX6s/

score 2 · Answer 2 · answered Jun 24 '12 at 13:15

You could modify the func function with an additional parameter which will represent a callback executed when the function succeeds:

func(x, y, finished) {
    $("#block").addClass("class");
    window.setTimeout(function() {
        $("#block").removeClass("class");
        finished();
    }, 1000);
};

and then chain the calls:

func(1, 2, function() {
    func(9, 3, function() {
        func(6, 4, function() {
            func(5, 6, function() {
                alert('all done');
            });
        });
    });
});

Yeah this is what i was playing around with, which works fine, is there any way do do this if you dont know how many calls are going to be made to the function? — Lunar, Jun 24 '12 at 13:17

score 0 · Answer 3 · answered Jun 24 '12 at 14:32

I think we should solve this problem using promise pattern available in jquery which allow chaining of callbacks without complex syntax pls see the below pseudo code for reference

function func(value1, value2) {
            var deffered = jQuery.Deferred();
            alert(value1);
            deffered.resolve();
            return deffered;
        }

jQuery.when(func(1, 2)).then(func(2, 3)).then(func(3,4));

Callbacks for the same function

3 Answers3