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.
