在实际开发中，一定有情况是这样的，一个页面我们有多个地方请求了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效果图消失‘); ???})

页面控制台打印效果：

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

js实现所有异步请求全部加载完毕后，loading效果消失

原文地址：https://www.cnblogs.com/bai1218/p/10134678.html