простой jQuery Chaining insight

Question

Мне показалось, что я понял силу цепочки jQuery, но теперь я немного смущен.

Используя пример выведения DIV, а затем удалить его:

• По JQuery СЦЕПЛЕНИЯ логики, я должен быть в состоянии сделать:

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

Но вместо этого я необходимо сделать следующее:

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

Почему это? Благодаря!

Answer 1

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

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

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

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

То же самое верно и для АЯКС операций, загрузка изображений, и т.д ...

Вы заставили меня задуматься о том, как сделать .remove() метод работы через очередь анимации. Можно на самом деле сделать это, создав новую версию удаления(), как это:

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

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

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

Там есть рабочий пример здесь: http://jsfiddle.net/jfriend00/3Hg6G/

Answer 2

Попробуйте это путь:

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

Answer 3

Вы можете написать плагин, чтобы сделать его ждать.

DEMO

$.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');