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效果图消失');
})页面控制台打印效果:
好了已经很晚了,各位晚安早点睡觉,保护好自己的头发~~~
js实现所有异步请求全部加载完毕后,loading效果消失的更多相关文章
- js图片未加载完显示loading效果
<html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...
- 页面加载完毕后调用js方法进行布局操控 已实验
页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...
- 在css加载完毕后执行后续代码
最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui ...
- php页面加载完毕后再显示购买按钮
php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})
- js实现的页面加载完毕之前loading提示效果
页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...
- JS实现页面加载完毕之前loading提示效果
1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...
- HTML页面加载完毕后运行的js
Js方法:<script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert ...
- 两种方法实现在HTML页面加载完毕后运行JS
JS默认方法: <script type=”text/javascript”> window.onload=function (){ /*代码区域*/ } </script> ...
- appcloud 加载第三方页面loading效果
apiready = function() { var header = $api.byId('header'); $api.fixIos7Bar(header); var headerPos = $ ...
随机推荐
- Android Animation 知识点速记备忘思维导图
备注的大段文本,无法在图片中体现, 思维导图源文件放在附件中.使用 Xmind 8 制作. 附件:AndroidAnimation-xmind.zip
- shp文件导入mysql5.6.15
百度了一下 方法大致相同,就是提供的资源都缺斤短两还在细节上有差异.所以上传一份正确的. 0.将cygwin1.dll拷贝到system32目录下面1.将shp以及shp的相关文件和DOShere的d ...
- SQL点点滴滴_删除临时表
select into 创建的表属于临时表,判断是否存在的方法 select c_adno,c_con_no into #temp from tb_contract IF OBJECT_ID( 'te ...
- [使用经验]cocostudio UI编辑器的裁剪
日志-2015/03/16 描述:在程序使用UI编辑器导出文件的时候,该panel中大于panel的部分都没有显示出来,例如人物,一些特效等 原因:UI编辑器panel都勾上了裁剪 解决:在编辑器中把 ...
- P vs NP
Complexity Class Computational problem Decision Problems Model of computation Time-complexity classe ...
- System IPC 与Posix IPC(semaphore信号灯)
POSIX下IPC主要包括三种: posix message queue posix semaphores posix shared memory sysytem v IPC包括: system v ...
- Visual Stuio 2010 常用快捷及操作(转)
文章来源:http://www.cnblogs.com/martianzone/p/3373791.html 1.如果你想复制一行代码(超级长,鼠标拖老久的),只需要在这行的空白处 CTRL+C 同理 ...
- std::string,std::vector,std::accumulate注意事项
在用string做字符串拼接时,会发现随着string的增大越来越慢,原因主要是string(和vector)是基于现行内存的数据结构,在海量数据时,经常会申请新的一块内存,把原有的数据拷贝过去然后再 ...
- 百度地图隐藏LOGO显示
在引入地图的页面加入下列样式即可隐藏百度地图左下角的LOGO <style type="text/css"> .anchorBL{display:none;} ...
- Spark Streamming 基本输入流(二) :Socket
Spark Streamming 可以通过socket 进行数据监听. socket的输入方可以通过nc 或者自己开发nc功能的程序. 1.系统自带的nc su root a yum install ...