在实际开发中，一定有情况是这样的，一个页面我们有多个地方请求了ajax，在这种情况下，我们要实现数据没来之前出现我们炫酷的loading效果，而且要等到所有的ajax都请求完毕后，才让我们的loading效果消失，那么问题来了，每个ajax请求数据的时间都是不确定的，我们这个loading效果结束的逻辑又应该放到哪里呢？就好比这样（伪代码模拟）：

console.log(‘loading效果图旋转中‘) var timer1 = setTimeout(() => { console.log(‘第一个加载完成了‘); }, ‘随机的时间‘); var timer2 = setTimeout(() => { console.log(‘第二个加载完成了‘); }, ‘随机的时间‘); var timer3 = setTimeout(() => { console.log(‘第三个加载完成了‘); }, ‘随机的时间‘); console.log(‘loading效果图消失,我好慌，我应该放到哪里‘)

　　是不是很难受，你说每个请求的结束时间都不确定，我哪知道我应该放到哪里结束，别怕，给大家提供两种解决方案，为了逻辑清晰，我就用一个延时器来给大家进行模拟了，莫要嫌弃:)

　　第一种解决方案：我们设置一个标识，比如loadingNums，当loadingNums等于0的时候，我们让loading消失，接下来看代码（应该用await和async来模拟的，但是重要的是思路，其他的不重要，你懂的）：

var loadingNums = 3; console.log(‘loading效果图旋转中‘) var timer1 = setTimeout(() => { console.log(‘第一个加载完成了‘); loadingNums--; if(loadingNums==0){ console.log(‘loading效果图消失‘) } }, 1000); var timer2 = setTimeout(() => { console.log(‘第三个加载完成了‘); loadingNums--; if(loadingNums==0){ console.log(‘loading效果图消失‘) } }, 2000); var timer3 = setTimeout(() => { console.log(‘第二个加载完成了‘); loadingNums--; if(loadingNums==0){ console.log(‘loading效果图消失‘) } }, 3000);

 页面控制台打印效果：

 

  　　第二种解决方案：我们可以用ES6的Promise，如果有不了解Promise的同学自行去查询相关文档，接下来开始我们的操作，Promise有一个all方法，接收一个参数，这个参数我们可以传一个数组，在这个数组中我们可以写多个Promise，看到这里你应该明白了，我们可以把所有的异步操作都用Promise包起来，然后都放到这个数组内（漂亮，给自己的聪明才智鼓个掌好不好），如你所想，这个all方法是可以等到数组中所有的Promise加载完成之后才去执行的，那还等什么，准备发车，看代码：

console.log(‘loading效果图旋转中‘) var p1 = new Promise(function(resolve,reject){ setTimeout(() => { console.log(‘第一个加载完成了‘); resolve(); }, 1000); }) var p2 = new Promise(function(resolve,reject){ setTimeout(() => { console.log(‘第三个加载完成了‘); resolve(); }, 2000); }) var p3 = new Promise(function(resolve,reject){ setTimeout(() => { console.log(‘第二个加载完成了‘); resolve(); }, 3000); }) Promise.all([p1,p2,p3]).then(function(){ console.log(‘loading效果图消失‘); })

 

页面控制台打印效果：

 

好了已经很晚了，各位晚安早点睡觉，保护好自己的头发~~~