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

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

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

 

页面控制台打印效果：

 

 

 

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