浅谈Deferred(延迟对象)

95 阅读 0 评论 63 点赞

我是靠谱客的博主温婉钢笔，这篇文章主要介绍浅谈Deferred(延迟对象)，现在分享给大家，希望可以做个参考。

Deferred

- 定义
- 使用场景
- 例子

定义

Deferred跟ES6中的Promise的套路是差不多的，不过Deferred是JQuery中的函数，我们先来看一下Deferred的一些介绍吧。

$.Deferred() 是一个构造函数，用来返回一个链式实用对象方法来注册多个回调，并且调用回调队列，传递任何同步或异步功能成功或失败的状态。

提示：

$.Deferred() 构造函数创建一个新的 Deferred（延迟）对象， jQuery.Deferred 可传递一个可选的函数，该函数在构造方法返回之前被调用并传递一个新的 Deferred 对象作为函数的第一个参数。例如被调用的函数可以使用 deferred.then（）来附加回调函数。
一个 Deferred 对象开始于挂起状态。任何使用 deferred.then(), deferred.always(), deferred.done(), 或者 deferred.fail() 添加到这个对象的回调函数都是排队等待执行的。调用 deferred.resolve() 或 deferred.resolveWith() 转换延迟到解决状态后立即执行设置的 doneCallbacks 。调用 deferred.reject() 或 deferred.rejectWith() 转换延迟到拒绝状态后立即执行设置的 failCallbacks 。一旦对象已经进入了解决或拒绝状态，它保持该状态。回调仍然可以添加到已解决或已拒绝的 Deferred 对象——它们会立即执行。

使用场景

1、处理异步请求后再执行业务代码；
2、解决回调地狱；

例子

今天遇到这样一个功能，就是上传图片时，要保存图片的高和宽，但是获取图片的高宽，创建一个Image对象，要等Image对象load完成后才会返回图片的信息，因此这是个异步操作。上传一张图片是好办的，但是如果有多张图片呢？所以我就想到了Deferred
举个栗子：

复制代码

uploadImgs: function(){
	var deferred = $.Deferred();
	var _URL = window.URL || window.webkitURL;
	var formData = new FormData(); 
	for (var i = 0, len = files.length; i < len; i++) {
	    var imgObj = files[i];
	    var me = this;
	    formData.append('file', imgObj);
	    var param = {}
	    this.getImgWh(imgObj, _URL, i).done(function(data){
	        param.imgWidth = data.width;
	        param.imgHeight = data.height;
	        param.imgSize = data.size;
	        if(data.i == len - 1){
	            formData.append('imgVos', JSON.stringify(imgVos));
	            //上传图片的请求
	           	//......
	           	//result = addImgs();
	            deferred.resolve(result);
	        }
	    })
	}
	return deferred.promise();
}

//获取图片的高和宽
getImgWh: function(){
 var deferred = $.Deferred();
    var img = new Image();
    img.onload = function () {
        deferred.resolve({
            fileName: fileName,
            width: this.width,
            height: this.height,
            size: imgObj.size,
            i: i
        });
    }
    img.src = _URL.createObjectURL(imgObj);
    return deferred.promise();
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
uploadImgs: function(){
	var deferred = $.Deferred();
	var _URL = window.URL || window.webkitURL;
	var formData = new FormData(); 
	for (var i = 0, len = files.length; i < len; i++) {
	    var imgObj = files[i];
	    var me = this;
	    formData.append('file', imgObj);
	    var param = {}
	    this.getImgWh(imgObj, _URL, i).done(function(data){
	        param.imgWidth = data.width;
	        param.imgHeight = data.height;
	        param.imgSize = data.size;
	        if(data.i == len - 1){
	            formData.append('imgVos', JSON.stringify(imgVos));
	            //上传图片的请求
	           	//......
	           	//result = addImgs();
	            deferred.resolve(result);
	        }
	    })
	}
	return deferred.promise();
}

//获取图片的高和宽
getImgWh: function(){
 var deferred = $.Deferred();
    var img = new Image();
    img.onload = function () {
        deferred.resolve({
            fileName: fileName,
            width: this.width,
            height: this.height,
            size: imgObj.size,
            i: i
        });
    }
    img.src = _URL.createObjectURL(imgObj);
    return deferred.promise();
}