ES6之promise比赛案例

var arr = [
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c0c05274f2fbb55fbccb89622f798907.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/b746a4db2e0473cc076a3a4b9bbe0235.jpg?w=632&h=340",
					"https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/816a66edef10673b4768128b41804cae.jpg?w=632&h=340"
				]
				//同时加载这三张图片,那张图片加载快,只显示那张图片 race比赛
		function loadimg(url){
			//返回一个promise实例
			return new Promise((resolve,reject)=>{
				var img=document.createElement('img');
				//创建一个图片节点
				img.src=url;//设置src
				img.width=200;//设置宽度
				img.onload=function(){
					//图片加载完毕
					resolve(img);//返回图片
				}
				img.onerror=function(e){
					reject(e)//失败e失败事件对象
				}
			})
		}
		//promise.race 比赛 那个promise最先 resolve返回那个
		Promise.race([
			loadimg(arr[0]),
			loadimg(arr[1]),
			loadimg(arr[2])
		])
		.then(res=>{
			document.body.append(res)
			//插入到body标签里面
		})
		.catch(err=>console.error(err))
		//如果失败打印失败的元素
  • 46
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 39
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 39
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值