JS回调函数

Question

我有一系列jQuery函数要在块中执行。当它们全部完成后，我需要调用另一个函数。看来回调是最好的方法。这是我的密码。

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

Answer 1

基本上和sjkm一样，但很简单。

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

小提琴

Answer 2

你可以这样做：

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