我怎樣才能調用一些javascript函數，但是，等待之前已經完成了？

Question

我想調用一些函數，但等待前一個已完成。 我知道jQuery在幾個函數中提供了一個回調參數，但我想了解如何在我自己的jQuery插件中實現此行爲。所以這樣的話：

從my previous question讀答案後，我寫了這個：

(function(callback){ 
     $('#art1').animate({'width':'1000px'},1000); 
     callback(); 
    })((function(callback2){ 
     $('#art2').animate({'width':'1000px'},1000); 
     callback2(); 
    })(function(){ 
     $('#art3').animate({'width':'1000px'},1000); 
    })); 

但不工作。我再次嘗試，並寫道：

animate1(function(){ 
     animate2(function(){ 
      animate3(); 
     }) 
    }); 

    function animate1(callback){ 
     $('#art1').animate({'width':'1000px'},1000); 
     callback(); 
    } 
    function animate2(callback){ 
     $('#art2').animate({'width':'1000px'},1000); 
     callback(); 
    } 
    function animate3(callback){ 
     $('#art3').animate({'width':'1000px'},1000); 
     callback(); 
    } 

但仍然無法正常工作。三個動畫仍然在同一時間開始。我希望他們被稱爲一個接一個。但是，如果沒有使用：

$('#art1').animate({'width':'1000px'},1000,'linear',function(){ 
     $('#art2').animate({'width':'1000px'},1000,'linear',function(){ 
      $('#art3').animate({'width':'1000px'},1000);   
     });   
    }); 

Answer 1

這是什麼Buffer是：

var Buffer = function(handler) { 
    var tasks = []; 
    // empty resolved deferred object 
    var deferred = $.when(); 

    // handle the next object 
    function handleNextTask() { 
     // if the current deferred task has resolved and there are more tasks 
     if (deferred.isResolved() && tasks.length > 0) { 
      // grab a task 
      var task = tasks.shift(); 
      // set the deferred to be deferred returned from the handler 
      deferred = handler(task); 
      // if its not a deferred object then set it to be an empty deferred object 
      if (!(deferred && deferred.promise)) { 
       deferred = $.when(); 
      } 
      // if we have tasks left then handle the next one when the current one 
      // is done. 
      if (tasks.length > 0) { 
       deferred.done(handleNextTask); 
      } 
     } 
    } 

    // appends a task. 
    this.append = function(task) { 
     // add to the array 
     tasks.push(task); 
     // handle the next task 
     handleNextTask(); 
    }; 
}; 

然後我們剛剛創建動畫，動畫任務的任務處理程序和任務追加到緩衝區。

function handleAnimation(task) { 
    var def = $.Deferred(); 
    $(task.id).animate(task.props, task.timeout, task.options function() { 
     def.resolve(); 
    }); 
    return def.promise(); 
} 

function AnimationTask(id, props, timeout, options) { 
    this.id = id; 
    this.props = props; 
    this.timeout = timeout; 
    this.options = options; 
} 

var buffer = new Buffer(handleAnimation); 
buffer.append(new AnimationTask("#art1", { 
    "width": "1000px" 
}, 1000, "linear"); 
buffer.append(new AnimationTask("#art2", { 
    "width": "1000px" 
}, 1000, "linear"); 
buffer.append(new AnimationTask("#art3", { 
    "width": "1000px" 
}, 1000, "linear"); 

這使用jQuery的魔術推遲執行一個接一個的任務。將它們鏈接起來可能更容易。

而且這會工作：

(function(callback){ 
    $('#art1').animate({'width':'1000px'},1000, function() { 
     callback(); 
    }); 
})((function(callback2){ 
    $('#art2').animate({'width':'1000px'},1000, function() { 
     callback2(); 
    }); 
})(function(){ 
    $('#art3').animate({'width':'1000px'},1000); 
})); 

Answer 2

我建議你Jquery Defered Object

Answer 3

下面是你自己的jQuery的擴展使用回調的例子：

http://jquery-howto.blogspot.com/2009/11/create-callback-functions-for-your.html

Answer 4

您需要將您的回調作爲參數傳遞給調用動畫：

function Animate(afterFirst,afterSecond) { 
    $('#art1').animate({'width':'1000px'},1000,function(afterFirst,afterSecond) { 
    afterFirst(); 
    $('#art2').animate({'width':'1000px'},1000,function(afterSecond) { 
     afterSecond(); 
     $('#art3').animate({'width':'1000px'},1000); 
    }); 
    }); 
} 

Answer 5

如果你只是想讓你的動畫一一運行，你只需要設置queue：true作爲其中一個動畫屬性。