JS Callback Functions

Question

I have a series of jQuery functions to execute in a block. When they ALL are done, I need another function to be called. It seems a callback is the best way to do this. Here is my code.

 function flipPage (x, callback) {

    $("#view-1").animate({
    width: x,
    }, 500);
  $("#view-2").animate({
    width: browserWidth - x,
    }, 500);
  $("#iframe-2").animate({
    left:   -x,
    }, 500);
  $("#sweeper").animate({
    left:   x,
    }, 500);

  callback(function() {
    alert("I'm Done.");
    //do the next thing
  }) ;
}

It does not work. I get Uncaught TypeError: undefined is not a function — Jon Paul Berti
– Jon Paul Berti, Commented Jan 27, 2014 at 19:54
Why are you passing all those empty functions to .animate()? — David
– David, Commented Jan 27, 2014 at 19:56
Good question on the empty functions. My bad. Removed. I'm calling flipPage as flipPage(20); — Jon Paul Berti
– Jon Paul Berti, Commented Jan 27, 2014 at 20:00
@JonPaulBerti: There's your problem! You aren't passing in anything for callback, so it's undefined... which is not a function. — gen_Eric
– gen_Eric, Commented Jan 27, 2014 at 20:01

sjkm · Accepted Answer · 2014-01-27 20:09:10Z

2

You could do something like this:

function flipPage (x, callback) {
      var animationHelper = {
        actionCounter: 0,
        actionCount: 4,
        callbackHandler: function() {
            this.actionCounter++;
            if(this.actionCounter == this.actionCount)
                this.callbackAllFinished();
        },
        callbackAllFinished: null
      };

      $("#view-1").animate({
        width: x }, 500, animationHelper.callbackHandler);

      $("#view-2").animate({
        width: browserWidth - x }, 500, animationHelper.callbackHandler);

      $("#iframe-2").animate({
        left: -x }, 500, animationHelper.callbackHandler);

      $("#sweeper").animate({
        left: x }, 500, animationHelper.callbackHandler);

      animationHelper.callbackAllFinished = function() {
        alert("I'm Done.");
        //do the next thing
      };
    }

edited Jan 27, 2014 at 20:09

answered Jan 27, 2014 at 20:01

sjkm

3,9572 gold badges28 silver badges43 bronze badges

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

1 Comment

Jon Paul Berti Over a year ago

Thanks sjkm. Can anyone offer a more simple example solution?

Blundering Philosopher · Accepted Answer · 2014-01-27 22:35:07Z

0

Essentially the same as sjkm's, but simplified.

function flipPage (x, callback) {
    var counter = 0;

    $("#view-1").animate({
        width: x,
    }, 500, finished);

    $("#view-2").animate({
        width: browserWidth - x,
    }, 500, finished);

    $("#iframe-2").animate({
        left:   -x,
    }, 500, finished);

    $("#sweeper").animate({
        left:   x,
    }, 500, finished);

    function finished() {
        counter++;      
        if (counter >= 4) {
            alert("I'm Done.");
            //do the next thing if callback exists
            callback && callback.call();          
        }
    };
}

jsfiddle

edited Jan 27, 2014 at 22:35

Blundering Philosopher

6,8512 gold badges46 silver badges62 bronze badges

answered Jan 27, 2014 at 22:09

Paul Asjes

5,8971 gold badge24 silver badges20 bronze badges

Collectives™ on Stack Overflow

JS Callback Functions

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related