jquery.deferred的用法

deferred对象对于异步函数执行完再执行另一个函数的方法

1.ceshi----$.Deferred()里面是什么函数--setTimeout还是ajax这样算是延迟加载，都会等他们加载完毕以后才执行

2.$.when()括号里面的函数$.ajax()，$.post(),$.get()他们的内部已经实现了deferred，如果是其他的不会正常执行这个函数

3.观察模式，主题和观察者，每个主题都要经过deferred处理，resolve（）是发送数据的，观察者是接受数据并且处理的

4.deferred对象就是jQuery的回调函数解决方案

var index={

/*实现异步执行完了以后再执行下一个异步*/

ceshi: function(){

$. Deferred( index. wait). done( function(){

console. log( 2);

}). done( function(){

setTimeout( function(){

console. log( 3);

}, 3000);

}). done( function(){

setTimeout( function(){

console. log( 4);

}, 3000);

});

},

wait: function( dtd){

setTimeout( function() {

console. log( 1);

dtd. resolve();

}, 5000);

return dtd. promise();

},

/*$.when()*/

one: function( dtd){

setTimeout( function(){

console. log( "执行了one");

dtd. resolve();

}, 5000);

return dtd. promise();

},

two: function( dtd){

setTimeout( function(){

console. log( "执行了two");

dtd. resolve();

}, 5000);

return dtd. promise();

},

oneajax: function(){

$. ajax({

url: 'one.json',

type: "get",

async: true,

data:{},

success: function( e){

console. log( "执行了ajaxone");

},

error: function(){

console. log( "错误一")

}

});

},

twoajax: function(){

},

when: function(){

$. when( $. ajax({

url: 'two.json',

type: "get",

async: true,

data:{},

success: function( e){

$( '.de'). text( e. le. le);

console. log( "执行了ajaxtwo");

},

error: function(){

console. log( "错误二")

}

}), $. ajax({

url: 'one.json',

type: "get",

async: true,

data:{},

success: function( e){

$( ".er"). text( e. de. de);

console. log( "执行了ajaxone");

},

error: function(){

console. log( "错误一")

}

})). done( function(){

var de= $( '.de'). text();

var le= $( '.er'). text();

$. ajax({

url: 'last.json',

type: "get",

async: true,

data:{ "de" :de, "le" :le},

success: function( e){

console. log( "的");

},

error: function(){

console. log( "错误一");

}

})

$( ".arrage"). text( "dew");

console. log( "执行最后");

});

},

/*观察者模式*/

watch: function(){

// 定义主题

var subjectAlice = ( function(){

var dfd = $. Deferred();

var task = function(){

// 发布内容

$. ajax({

url: 'two.json',

type: "get",

async: true,

data:{},

success: function( e){

$( '.de'). text( e. le. le);

console. log( "hou执行");

dfd. resolve( e);

},

error: function(){

console. log( "错误二")

}

});

}

setTimeout( task, 3000);

return dfd. promise();

})();

var subjectTom = ( function(){

var dfd = $. Deferred();

var task = function(){

// 发布内容

$. ajax({

url: 'one.json',

type: "get",

async: true,

data:{},

success: function( e){

$( ".er"). text( e. de. de);

console. log( "hou执行了ajaxone");

dfd. resolve( e);

},

error: function(){

console. log( "错误一")

}

});

}

setTimeout( task, 1000);

return dfd. promise();

})();

var subjectHou = ( function(){

var dfd = $. Deferred();

var task = function(){

// 发布内容

$. ajax({

url: 'last.json',

type: "get",

async: true,

data:{},

success: function( e){

console. log( "hou的");

dfd. resolve( e);

},

error: function(){

console. log( "错误一");

}

});

}

setTimeout( task, 1000);

return dfd. promise();

})();

// 两个观察者

var fn1 = function( content1, content2){

console. log( "fn1: " + content1 );

console. log( "fn12: " + content2 );

}

var fn2 = function( content1, content2){

console. log( "fn2: " + content1 );

console. log( "fn22: " + content2 );

}

var fn3= function( content1, content2, content3){

console. log( "fn3: "+ content1);

console. log( "fn3: "+ content2);

console. log( "fn32: "+ content3);

}

// 注册观察者

$. when( subjectAlice, subjectTom, subjectHou). done( fn1 ). done( fn2 ). done( fn3);

},

//

init: function(){

//this.ceshi();

this. when();

this. watch();

},

}

index. init();