js实现所有异步请求全部加载完毕后,loading效果消失
2018-12-17 23:23
190 查看
在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了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提示效果完整示例【附demo源码下载】
- JS实现页面加载完毕之前loading提示效果
- JS实现页面加载完毕之前loading提示效果
- js实现的页面加载完毕之前loading提示效果完整示例【附demo源码下载】
- JS实现页面加载完毕之前loading提示效果
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果
- Silverlight:利用异步加载Xap实现自定义loading效果
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果
- 纯js实现分页 原理:所有数据已加载好 js通过遍历部分显示 实现分页效果
- js loading加载效果实现代码
- js loading加载效果实现代码
- 异步加载js文件并执行js方法:实现异步处理网页的复杂效果(转)
- JS判断页面所有Iframe是否全部请求完成加载完成
- turn.js异步加载实现翻书效果
- 纯js实现分页 原理:所有数据已加载好,js通过遍历部分显示,实现分页效果
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- 异步加载js 三种实现方案
- JS实现密码框根据焦点的获取与失去控制文字的消失与显示效果
- Jquery实现ajax loading加载效果
- Angular.JS + Require.JS + angular-async-loader 来实现异步加载 angular 模块