Ma thuật với jQuery Deferred


Những ai đã từng làm việc với jQuery đặc biệt là với các hiệu ứng Animation hoặc Ajax với tính năng callback. Chắc hẳn bạn cũng đã từng điên cái đầu với những hiệu ứng kết hợp phức tạp, nối tiếp nhau… Nó làm cho mã nguồn trở nên rối như tơ vò. Mức độ phức tạp ngày một tăng khi bạn phải callback nhiều tầng nhiều lớp.

Ví dụ đơn giản là bạn muốn thực hiện 3 ajax call kế tiếp nhau, sử dụng kết quả của nhau. Bạn làm thế nào

$.ajax({…

success : function(){

$.ajax({…

success: function(){

$.ajax({…

success : function(){}

}

}

}

});

Bức tranh tương tự với các hiệu ứng animation của  jQuery.

Rất nhiều dư thừa trong đó. Và đặc biệt là rất khó phát triển, thay đổi … theo chiều sâu tính bằng số lượng của các ajax call bạn cần giải quyết.

Nhưng jQuery đã nhận ra điều đó và giải quyết nó từ jQuery 1.5

Với $.Deffered, bạn không phải lo lắng về những điều đó nữa.

function callAjax1(){

$.ajax({..});

}

function callAjax2(){

$.ajax({..});

}

function callAjax3(){

$.ajax({..});

}

$.when(callAjax1).then(callAjax2).then(callAjax3)

Bạn cũng có thể tự tạo defered cho các hiệu ứng như:

function getData(){
return $.get(‘/foo/’);
}
function showDiv(){
var dfd = $.Deferred();
$(‘#foo’).fadeIn( 1000, dfd.resolve );
return dfd.promise();
}
$.when( getData(), showDiv() )
.then(function( ajaxResult ){
console.log(‘The animation + AJAX request are both done!’);           // ‘ajaxResult’ is the server’s response
});

Có lẽ không cần phải nói thêm về tính hữu ích của nó. Tất cả đều có thể xem ở website của jQuery.

One comment

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s