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

Deferred

    • 定义
    • 使用场景
    • 例子

定义

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

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

提示:

  1. $.Deferred() 构造函数创建一个新的 Deferred(延迟)对象, jQuery.Deferred 可传递一个可选的函数,该函数在构造方法返回之前被调用并传递一个新的 Deferred 对象作为函数的第一个参数。例如被调用的函数可以使用 deferred.then()来附加回调函数。
  2. 一个 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();
}

最后

以上就是温婉钢笔最近收集整理的关于浅谈Deferred(延迟对象)的全部内容,更多相关浅谈Deferred(延迟对象)内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(51)

评论列表共有 0 条评论

立即
投稿
返回
顶部