$.when(),$.deferred()对象的用例

2019独角兽企业重金招聘Python工程师标准>>>

翻看以前的项目，发现有段代码写得太不忍直视，忍不住重写一下，用到jquery的$.when(),$.deferred()对象

需求是：①界面上需要初始化一个模块界面，②加载此界面需要向后端发送三个请求，根据返回的数据进行页面加载，③三个请求都比较耗时，请求返回的分别为一号数据，二号数据，三号数据，④加载界面的时候必须依据一号数据界面加载完了，加载二号数据的界面，最后才加载三号数据的界面，⑤尽可能的用最少的时间完成全部页面的加载。

实现逻辑：以前的代码是三个异步请求，然后实现dom元素的监听来实现的，不仅可读性差，而且相当啰嗦，现在使用$.when(),$.deferred()对象来实现相应的功能，具体代码如下：

(()=>{
	console.log("初始化界面："+new Date());
	let load_data1 = (def)=>{ 
		let a = ()=>{
			console.log("一号数据来了");
			def.resolve("hello");
		}
		setTimeout(a,5000);
		return def.promise();
	}
	
	let load_html1 = (def)=>{
		$.when(load_data1($.Deferred())).done((str)=>{
			$("body").append(`<h3>一号的界面加载好了，${str}，我是第一个</h3>`);
			def.resolve();
		});
		return def.promise();
	}
	
	let load_data2 = (def)=>{
		let a = ()=>{
			console.log("二号数据来了");
			def.resolve("world");
		}
		setTimeout(a,3000);
		return def.promise();
	}
	
	let thc_html2 = (def)=>{
		$.when(load_data2($.Deferred()),load_html1($.Deferred())).done((str)=>{
			$("body").append(`<h3>二号的界面加载好了，${str}，我是第二个</h3>`); 
			def.resolve();
		});
		return def.promise();
	}
	
	let load_data3 = (def)=>{
		let a = ()=>{
			console.log("三号数据来了");
			def.resolve();
		}
		setTimeout(a,3000);
		return def.promise();
	}
	
	let load_html3 = ()=>{
		$("body").append(`<h3>三号的界面加载好了，deferred，我是第三个</h3>`);
		console.log("完成全部页面加载界面："+new Date());
	} 
	
	$.when(load_data3($.Deferred()),thc_html2($.Deferred())).done(load_html3); 
})();

一二号请求分别需要3,3,5秒时间，但是加载完全部界面只用了5秒，而且代码可读性很高，并且简洁了许多

转载于:https://my.oschina.net/ThreeTiger/blog/3029509