jquery-deferred应用

我们说jquery1.5之后用的用deferred，那么deferred到底是个什么东西，看个例子

var wait = function(){

　　var task = function(){

　　　　console.log('执行完成');

　　}

　　setTimeout(task, 2000);

}

wait();

现在在task里面的执行完成之后进行某些特别复杂的操作，代码可能会很多。那么要这么怎么办。如果继续在下面写也没有问题，但是不符合开放封闭的原则。后面很有可能多次再改这一大堆的代码。对修改开放，对拓展关闭。我们需要实现对修改关闭，对拓展开放。

为了解决这个问题，我们引入jquery的deferred

function waitHandle(){

　　var dtd = $.Deferred(); // 创建一个deferred对象

　　var wait = function(dtd){ // 要求传入一个 deferred对象

　　　　var task = function(){

　　　　　　console.log('执行完成');

　　　　　　dtd.resolve(); // 表示异步任务已经完成

　　　　　　// dtd.reject(); // 表示异步任务失败或出错

　　　　}

　　　　setTimeout(task, 2000);

　　　　return dtd; // 要求返回deferred对席那个

　　}

　　// 注意，这里一定要有返回值

　　return wait(dtd);

}

这里面有三层函数，第一层函数是waitHandle，第二层是wait函数，第三层是task函数。这里有两个return，第一个传进did。然后进行一系列加工，返回了dtd。然后最终怎么用

var w = waitHandle();

w.then(function(){

　　console.log('success1');

},function(){

　　console.log('error');

})

.then(function(){

　　console.log('success2')

},function(){

　　console.log('error2')

});

// 还有w.done 和 w.fail

总结，dtd的api可分成两类，用意不同

第一类：dtd.resolve dtd.reject

第二类：dtd.then dtd.done dtd.fail

这两类应该分开，否则后果很严重！

比如在上面代码最后执行dtd.reject()。试一下后果。。

function waitHandle(){

　　var dtd = $.Deferred(); // 创建一个deferred对象

　　var wait = function(dtd){ // 要求传入一个 deferred对象

　　var task = function(){

　　　　console.log('执行完成');

　　　　dtd.resolve(); // 表示异步任务已经完成

　　　　// dtd.reject(); // 表示异步任务失败或出错

　　}

　　setTimeout(task, 2000);

　　　　return dtd; // 要求返回deferred对席那个

　　}

　　// 注意，这里一定要有返回值

　　return wait(dtd);

}

var w = waitHandle();

w.reject() // 非常不老实的做法

w.then(function(){

　　console.log('success1');

},function(){

　　console.log('error');

}).then(function(){

　　console.log('success2')

},function(){

　　console.log('error2')

});

那么怎么解决这个问题呢，也就引出了最最重要的角色，非常类似于promise；

function waitHandle(){

　　var dtd = $.Deferred(); // 创建一个deferred对象

　　var wait = function(dtd){ // 要求传入一个 deferred对象

　　　　var task = function(){

　　　　　　console.log('执行完成');

　　　　　　dtd.resolve(); // 表示异步任务已经完成

　　　　　　// dtd.reject(); // 表示异步任务失败或出错

　　　　}

　　　　setTimeout(task, 2000);

　　　　return dtd.promise(); // 这里返回promise，而不是直接返回deferred

　　}

　　// 注意，这里一定要有返回值

　　return wait(dtd);

}

var w = waitHandle();

w.then(function(){

　　console.log('success1');

},function(){

　　console.log('error');

}).then(function(){

　　console.log('success2')

},function(){

　　console.log('error2')

});

虽然这里promise()方法的调用，但已经把promise最初的概念提出来了，这还是jquery1.5的时候。返回promise以后，这个时候去b同学去改w.reject()会报错。返回promise后，只能用监听的方法then,done,fail，不能去改resolve,reject。监听是其他同学唯一的权利。

巴特西

jquery-deferred应用

最新文章

热门文章