Как связать или поставить в очередь пользовательские функции, используя JQuery?

У меня есть несколько функций, которые делают разные анимации для разных частей HTML. Я хотел бы поставить эти функции в очередь или поставить их в очередь, чтобы они запускали анимацию последовательно, а не одновременно.

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

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

Имеет ли jquery «очередь»? Помогите? Я не мог понятьдокументация для очереди.

Пример, JQuery:

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML:

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

Благодарю.

РЕДАКТИРОВАТЬ: Я попробовал это стаймеры но я думал, что есть лучший способ сделать это.

РЕДАКТИРОВАТЬ № 2:

Позвольте мне быть более конкретным. У меня есть несколько функций, привязанных к клику & amp; Наведение событий на разные элементы страницы. Обычно эти функции не имеют никакого отношения друг к другу (они не ссылаются друг на друга). Я хотел бы смоделировать пользователя, проходящего через эти события, не меняя код моих существующих функций.

Ответы на вопрос(14)

Хотя ответ Иегуды Каца технически верен, он очень быстро раздуется с более крупными и сложными анимациями.

Я сделал плагин для таких ситуаций, как ваша, который учитывает функции очередей (с паузой и возобновлением при необходимости).

демо:https://jessengatai.github.io/okaynowthis.js/

Решение вашей проблемы с использованием okaynowthis.js будет выглядеть так:

$('window').load(function(){

    // keyframe 1
    $('body').okaynowthis('keyframe',0,function(){
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    // keyframe 2 (with 2 seconds delay from keyframe 1)
    }).okaynowthis('keyframe',2000,function(){
        $('div#animateTest2').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    });

});

Как насчет чего-то подобного?

var f1 = function() {return $(SELECTOR1).animate({ 'prop': 'value' }, 1000)};
var f2 = function() {return $(SELECTOR2).animate({ 'prop': 'value' }, 1000)};
var f3 = function() {return $(SELECTOR3).animate({ 'prop': 'value' }, 1000)};

$.when(f1).then(f2).then(f3);

Вместо создания функции простой способ здесь:

$('#main').animate({ "top": "0px"}, 3000, function()
   {    $('#navigation').animate({ "left": "100px"},  3000, function() 
        {
            alert("Call after first and second animation is completed.");
        })
    }
);

Итак, Jquery по умолчанию предоставляет очередь, которая выполняет функцию по очереди.

Копирование и вставка ............ 7/7/2013

<!doctype html>
<html lang="en">
    enter code here<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},1500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      jQuery.queue( $("div")[0], "fx", [] );
      $("div").stop();
    });
</script>

</body>
</html>
$('div#animateTest1').animate({left: '+=200'},2000, 
function(){
   $('div#animateTest2').animate({ width: '+=200' }, 2000);
}
);

Действительно простое исправление.

function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000, Two);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
//We no longer need to call Two, as it will be called when 1 is completed.
    //Two();

Более безопасный и 100% рабочий способ - использовать переменную и if-ветки. В приведенном ниже примере мы выполняем 4 задания, которые занимают 1 секунду, после задания мы хотим запустить функцию f2.

<html><body>
<div id="a" class="a" />
 <script type="text/javascript">
var jobs = 0;
function f1() {
job(); 
job();
job();
job();    
};

function f2() {
    if(jobs >3)
        l("f2");
};

<!------------------------- ->
function job() {
    setTimeout(function() {
        l("j");
        jobs+=1;
        f2();
    }, 1000);
}
function l(a) {
    document.getElementById('a').innerHTML+=a+"<br />";
};
f1();


</script></body></html>

@TrippRitter должен прикрепить .call к обратному вызову

One = function(callback){
    $('div#animateTest1').animate({ left: '+=200' }, 2000, function(){
        if(typeof callback == 'function'){
            callback.call(this);
        }
    });
}

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

One(function(){ 
    Two();
});

но это то же самое, что делать следующее

$('div#animateTest1')
    .animate({ left: '+=200' }, 2000, 
    function(){
       Two();
    });

Two = function(){
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

Следующее будет работать и не будет ошибки, если обратный вызов равен нулю:

function One(callback)
{
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
       function()
       {
            if(callback != null)
            {
                 callback();
            }
       }
    );
}
function Two()
{
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

var callback = function(){ Two(); };
One(callback);
Решение Вопроса

Код jQuery Queue не так хорошо документирован, как мог бы, но основная идея заключается в следующем:

$("#some_element").queue("namedQueue", function() {
  console.log("First");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Second");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Third");
});

$("#some_element").dequeue("namedQueue");

Если вы запустите этот код, вы увидите & quot; Первый & quot; в консоли - пауза 1 с, см. «Второй» в консоли еще одна пауза в 1 с и, наконец, см. «Третий» в консоли.

Основная идея заключается в том, что вы можете иметь любое количество именованных очередей, привязанных к элементу. Вы удаляете элемент из очереди, вызываяdequeue, Вы можете сделать это вручную столько раз, сколько захотите, но если вы хотите, чтобы очередь запускалась автоматически, вы можете просто позвонитьdequeue внутри очереди функции.

Все анимации в jQuery запускаются внутри очередиfx, Когда вы анимируете элемент, он автоматически добавляет новую анимацию в очередь и вызывает dequeue, если в данный момент анимации не запущены. Вы можете вставить свои собственные обратные вызовы наfx очередь, если хотите; вам просто нужно позвонитьdequeue вручную в конце (как и при любом другом использовании очереди).

В одном из моих веб-проектов мне приходилось выполнять различные последовательности действий в зависимости от того, какое событие произошло. Я сделал это с помощью обратных вызовов (что-то вроде шаблона посетителя). Я создал объект, чтобы обернуть любую функцию или группу действий. Тогда я бы поставил в очередь эти обертки; массив работает нормально. Когда событие запускается, я перебираю массив, вызывая специализированный метод моего объекта, который принимает обратный вызов. Этот обратный вызов вызвал мою итерацию, чтобы продолжить.

Чтобы обернуть функцию, вам нужно знаниефункция применения, Функция apply принимает объект для области видимости и массив аргументов. Таким образом, вам не нужно ничего знать о функциях, которые вы упаковываете.

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

Затем я добавляю вызов функции, который проходит через массив и вызывает каждую функцию к событию через jQuery.

Возможно, вы могли бы создать очень простой плагин для jQuery, который мог бы справиться и с этим внутренне.

Предполагая, что вы хотите сохранитьOne а такжеTwo как отдельные функции, Вы могли бы сделать что-то вроде этого:

function One(callback) {
    $('div#animateTest1').animate({ left: '+=200' }, 2000, 
        function(e) { callback(); });
}
function Two() {
    $('div#animateTest2').animate({ width: '+=200' }, 2000);
}

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One(Two);

Поскольку интервал анимации уже определен в 2000 мс, вы можете сделать второй вызов с задержкой в 2000 мс:

One();
SetTimeout(function(){
  Two();
}, 2000);

Ваш ответ на вопрос