простий JQuery Chaining insight - javascript, jquery

Я думав, що розумію ланцюгову силу jQuery, але тепер трохи розгублений.

Використовуючи приклад вицвітання DIV та видалення його:

• За логікою ланцюга jQuery я повинен мати можливість:

  $(this).parent().fadeOut(500).remove();
  

Але замість цього я повинен зробити це:

$(this).parent().fadeOut(500,function() { $(this).remove(); });

Чому так? Дякую!

Відповіді:

11 за відповідь № 1

Ви не можете зателефонувати .remove() одразу тому, що .fadeOut() Операція - це асинхронна операція, яка повертається відразу (після того, як вона лише запустить анімацію), але продовжує виконуватись через таймери. Коли .fadeOut() повертається, і наступна ланцюгова операція виконується, анімація лише почалася - вона не завершилася. Якщо ви робите .remove() звичайним ланцюжком ви видаляєте його перед тим, як анімація досягне будь-якого прогресу.

Отже, як ви виявили, вам доведеться почекати, поки виклик завершення виклику анімації, і тоді ви можете її видалити.

Єдиним винятком цього є додаткові ланцюжкианімаційні дзвінки. Ви можете ланцюжок анімацій, оскільки анімації - це окремий випадок, який переходить у чергу анімації. Після запуску анімації наступні дзвінки анімації бачать, що анімація вже триває, і вони переходять у внутрішню чергу. Коли перша анімація закінчиться, вона перевіряє чергу анімації, щоб побачити, чи є ще кілька ланцюжкових анімацій для запуску.

Майже всі асинхронні операції в JavaScriptне блокують подібне. Це означає, що заклик розпочати їх саме це - заклик розпочати їх. Потім цей виклик повертається одразу, а решта операції триває за допомогою таймерів або інших подій, а подальше виконання JavaScript продовжується (включаючи інші ланцюгові методи). Ви дізнаєтесь, коли операція фактично виконана, зареєструвавши зворотний виклик завершення.

Те саме стосується операцій Ajax, завантаження зображень тощо ...

Ви змусили мене думати, як зробити це .remove() метод роботи через чергу анімації. Насправді це можна зробити, створивши нову версію видалення () такої:

$.fn.fxRemove = function() {
this.queue(function(next) {
$(this).remove();
next();
});
return(this);
}

Ця форма видалення переходить у чергу анімації та виконуватиметься тоді, коли анімації, пов'язані ланцюжком, перед цим будуть виконані. Отже, ви можете використовувати:

$(this).parent().fadeOut(500).fxRemove();

Тут є робочий приклад: http://jsfiddle.net/jfriend00/3Hg6G/

---

0 для відповіді № 2

Ви можете написати плагін, щоб змусити вас чекати.

$.fn.q = function(fn) {
var that = this, arg = Array.prototype.slice.call(arguments, 1);

return this.queue(function(next) {
that[fn].apply(that, arg);
next();
});
};

використання:

$(this).parent().fadeOut(500).q("remove");

---

-1 для відповіді № 3

Спробуйте так:

$(this).parent().fadeOut().delay(500).remove();

---