知行合一，止于至善
千里之行，始于足下；合抱之木，生于毫末；九层之台，起于累土Jquery Ajax的链式操作(chaining)
1月 2, 2018 |
Nix.Huang
jquery 1.5以前，将ajax所有的事件处理器作为$.ajax() 参数对象的属性(success:function(){}, error:function(){})传入。写法如下
|
1 2 3 4 5 6 7 8 |
$.ajax({ ? url: "http://fiddle.jshell.net/favicon.png", ? success: function() { if ( console && console.log ) { console.log( "Sample of data:", data.slice( 0, 100 ) ); } ? } }); |
从1.5开始， 可以按照如下的写法：
|
1 2 3 4 5 6 7 |
$.ajax({ ? url: "http://fiddle.jshell.net/favicon.png" }).done(function( data ) {? ? if ( console && console.log ) { ? ? ? console.log( "Sample of data:", data.slice( 0, 100 ) );? ? }? }); |
这主要归功于Jquery新的Deferred? 对象的功劳， $.ajax() 返回的是jqXHR 对象，改对象克隆了promise对象的所有方法所以通过jqXHR.done()添加的各种事件处理器能被正确的执行，从而代码的可读性大大的提高。
Deferred 对象也可以直接使用，比如
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
var wait = function() { var dtd = $.Deferred(); var tasks = function() { alert("定时器回调函数成功执行"); dtd.resolve(); }; setTimeout(tasks, 2000); return dtd.promise(); }; //$.when 用于将多个promise对象封装成一个promise对象，所有被封装的promise的状态为resoved, 那么该封装promise的状态为resolved，触发通过promise.done()。 只要有一个promise的状态为rejected, 那么该封装promise的状态为rejected,触发通过promise.fail() 添加的处理器函数. var promise = $.when( wait() ); promise.done(function() { alert("通过promise添加的处理器执行"); }); #由于添加处理器时promise的状态为resolved, 所以立即执行该处理器函数 setTimeout(function(){ promise.done(function(){ alert("延后通过promise添加的处理器执行"); }); }, 5000); |
参考文档
introduction-jquery-deferred-objects/
Posted in: WEB开发
Comments are closed.