Последовательные анимации не работают с промисами jQuery

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

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

    go("one", function () {
        go("two", function () {
            go("three", null);
        });
    });

http://jsfiddle.net/stevenc/m0en7avd/2/

Однако я хочу иметь возможность сделать это с помощью jQuery promises/deferred. Я создавал отложенный объект и возвращал его обещание. Обратный вызов анимации теперь устанавливает обещание как разрешенное, и только в этот момент я ожидал, что «затем» начнется:

go("one").then(go("two")).then(go("three"));

Однако происходит то, что все анимации запускаются одновременно.

http://jsfiddle.net/stevenc/wsqm6yo1/11/

Может ли кто-нибудь увидеть, что мне не хватает?


animation jquery promise deferred
person steven_c    schedule 17.02.2015    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Вы вызываете функции вместо их вызова, ваш код с обратными вызовами выглядит следующим образом:

go("one", go("two", go("three")))

Вместо этого свяжите функции:

go("one").then(function(){ return go("two"); }).
          then(function(){ return go("three"); });

Как вы можете увидеть в этой скрипте.

Или используйте bind, который возвращает функцию с фиксированными аргументами:

go("one").then(go.bind($, "two")).then(go.bind($, "three"));

Как вы можете см. здесь. Обратите внимание, что у вас также есть отложенный анти-шаблон в вашем коде — ваша функция go может быть упрощена до:

function go(id, c) {
    return $("#" + id).animate({
        left: "300px"
    }).promise()
}
person Benjamin Gruenbaum    schedule 17.02.2015
comment
Спасибо Бенджамин, отличный ответ! - person steven_c; 17.02.2015