Как я могу вызвать некоторые функции JavaScript, но ожидание предыдущего закончилось?

Question

Я хочу вызвать некоторые функции, но ожидание предыдущей закончено.Я знаю, что jQuery предоставляет аргумент обратного вызова в нескольких функциях, но я хочу узнать, как реализовать это поведение в моем собственном плагине jQuery.Так что это так:

После прочтения ответов от мой предыдущий вопрос Я написал это:

    (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

Если вы просто хотите, чтобы анимация запускалась одна за другой, вам просто нужно установить queue: true в качестве одного из свойств анимации.http://api.jquery.com/animate/

Answer 3

Вот пример использования обратных вызовов в вашем собственном расширении jquery:

http://jquery -howto.blogspot.com / 2009/11 / создания обратного вызова-функции-на-your.html

Answer 4

Вам необходимо передать обратные вызовы в качестве аргументов для вызовов animate:

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

Я рекомендую вам Jquery Defered Object