đơn giản jQuery Chaining cái nhìn sâu sắc

Question

Tôi nghĩ rằng tôi hiểu sức mạnh chuỗi của jQuery, nhưng bây giờ tôi là một chút bối rối.

Sử dụng ví dụ của fading ra một DIV, và sau đó loại bỏ nó:

• By jQuery chaining được kết logic, tôi sẽ có thể làm:

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

Nhưng thay vào đó tôi phải làm điều này:

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

Tại sao lại như vậy? Cảm ơn!

Answer 1

Bạn không thể gọi .remove() ngay lập tức vì thao tác .fadeOut() là một hoạt động không đồng bộ trả về ngay lập tức (sau khi khởi động hoạt ảnh), nhưng vẫn tiếp tục thực hiện qua bộ hẹn giờ. Khi trả về .fadeOut() và thao tác chuỗi tiếp theo thực hiện, hoạt ảnh chỉ mới bắt đầu - nó chưa hoàn thành. Nếu bạn làm .remove() với chuỗi bình thường, bạn xóa nó ngay lập tức trước khi hoạt ảnh thực hiện bất kỳ tiến bộ nào.

Vì vậy, như bạn đã phát hiện, bạn phải chờ cho đến khi hoàn thành gọi lại được gọi là cho các hình ảnh động và sau đó bạn có thể loại bỏ nó.

Một ngoại lệ cho điều này là các cuộc gọi hoạt ảnh có chuỗi bổ sung. Bạn có thể chuỗi hoạt ảnh vì hoạt ảnh là trường hợp đặc biệt đi vào hàng đợi hoạt ảnh. Khi hoạt ảnh đã bắt đầu, các cuộc gọi hoạt ảnh tiếp theo sẽ thấy rằng đã có một hoạt ảnh đang diễn ra và chúng sẽ đi vào hàng đợi nội bộ. Khi hoạt ảnh đầu tiên kết thúc, nó sẽ kiểm tra hàng đợi hoạt ảnh để xem liệu có nhiều hoạt ảnh bắt đầu hay không.

Gần như tất cả các hoạt động không đồng bộ trong javascript đều không bị chặn như thế này. Điều đó có nghĩa là các cuộc gọi để bắt đầu họ chỉ là - một cuộc gọi để bắt đầu chúng. Cuộc gọi đó sau đó sẽ trở lại ngay lập tức và phần còn lại của hoạt động được thực hiện thông qua tính giờ hoặc các sự kiện khác và javascript tiếp theo tiếp tục thực hiện (bao gồm cả các phương thức xích khác). Bạn sẽ chỉ biết khi nào hoạt động thực sự được thực hiện bằng cách đăng ký gọi lại hoàn thành.

Điều này cũng đúng cho các hoạt động ajax, tải hình ảnh, vv ...

Bạn đã cho tôi suy nghĩ về làm thế nào để làm cho công việc .remove() phương pháp thông qua hàng đợi hình ảnh động. Trên thực tế, bạn có thể thực hiện điều đó bằng cách tạo phiên bản xóa mới() như sau:

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

Hình thức xóa này nằm trong hàng hoạt ảnh và sẽ thực hiện khi hoạt ảnh được ghép trước khi hoàn thành. Vì vậy, sau đó bạn có thể sử dụng:

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

Có một ví dụ làm việc ở đây: http://jsfiddle.net/jfriend00/3Hg6G/

Answer 2

Thử cách này:

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

Answer 3

Bạn có thể viết một plugin để làm cho nó chờ đợi cho bạn.

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(); 
    }); 
}; 

sử dụng:

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