Секвенирование 2 строк jQuery

Question

У меня есть следующие строки jQuery:

// When dragging ends
stop: function(event, ui) {
    // Replace the placeholder with the original
    $placeholder.after( $this.show() ).remove();
    // Run a custom stop function specitifed in the settings
    settings.stop.apply(this);
},

Я не хочу, чтобы settings.stop.apply(this); работал до тех пор, пока строка выше ($placeholder.after( $this.show() ).remove();), сейчас происходит то, что settings.stop запускается рано.

С помощью jQuery, как мне упорядочить эти две строки, чтобы они не продолжались до тех пор, пока первая не будет завершена?

Answer 1

Еще один способ дождаться окончания анимации - использовать ее обратный вызов:

stop: function(event, ui) {
     $placeholder.after( $(this).show('fast', 
                           function() { // called when show is done
                              $placeholder.remove(); // var still accessable
                              settings.stop.apply(this);
                            });
                       );

Answer 2

Анимации происходят асинхронно, поэтому ваш $this.show() не завершается до строки settings.stop.apply.... Все анимации попадают в очередь по умолчанию ("fx"), которая воспроизводится одна за другой. Вы можете добавить что-то (даже если это не анимация) в эту последовательность, используя функцию queue . Итак, чтобы адаптировать ваш пример:

// When dragging ends
stop: function(event, ui) {
    // Replace the placeholder with the original
    $placeholder.after( $this.show() ).remove();
    // Run a custom stop function specitifed in the settings
    var x = this;   //make sure we're talking about the right "this"
    $this.queue(function() {
        settings.stop.apply(x);
        $(this).dequeue();    //ensure anything else in the queue keeps working
    });
},

---

Редактировать в ответ на ваш комментарий " Что вы подразумеваете под правом" this "? ":

В JavaScript this может быть хитрым зверем , который меняется в зависимости от области действия, на которую он ссылается. В обратном вызове, переданном функции queue, this будет ссылаться на объект DOM, на котором выполняется queue (то есть объект DOM, на который ссылается $this. Однако вполне возможно, что this во внешней stop функция ссылается на какой-то другой объект ...

Теперь, в вашем примере, есть вероятность, что внешний this ссылается на объект DOM, который представлен объектом $this jQuery (т.е. вы, вероятно, получили var $this = $(this); где-то выше, где был взят этот фрагмент) от). В этом случае x не требуется, поскольку два this были бы одинаковыми. Но так как я не знал, я думал, что должен удостовериться. Итак, я создал замыкание *, создав новую переменную x, которая ссылается на «правильную» this (x теперь перехватывается в замыкании, поэтому мы точно знаем, что это относится к правильной вещи в обратном вызове queue.

_{* Это немного утомительно, но если вы справитесь с этой последней связанной статьей, вы получите прекрасное понимание того, как javascript соединяется.}