在实际开发中, 一定有情况是这样的, 一个页面我们有多个地方请求了 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 效果图消失');
- })
页面控制台打印效果:
好了已经很晚了, 各位晚安早点睡觉, 保护好自己的头发~~~
来源: https://www.cnblogs.com/bai1218/p/10134678.html