js实现所有异步请求全部加载完毕后,loading效果消失-程序员宅基地

技术标签: ViewUI  前端  javascript  

  在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/weixin_30588729/article/details/98278545

智能推荐

Vue中的六种过渡动画解析_vue 过渡动画类型-程序员宅基地

文章浏览阅读1.3k次。过渡CSS的类名:v-enter:定义进入过渡的开始状态。在元素被插入之前生效,在元素被插入之后的下一帧移除。 v-enter-active:定义进入过渡生效时的状态。在整个进入过渡的阶段中应用,在元素被插入之前生效,在过渡/动画完成之后移除。这个类可以被用来定义进入过渡的过程时间,延迟和曲线函数。 v-enter-to:2.1.8 版及以上定义进入过渡的结束状态。在元素被插入之后下一帧生..._vue 过渡动画类型

TensorFlow中的梯度裁剪(Gradient Clipping)_tensorflow梯度裁剪-程序员宅基地

文章浏览阅读1.1w次,点赞3次,收藏30次。梯度爆炸是深度学习中十分常见的现象,有时会导致寻优过程不收敛,或者算出来的结果干脆直接溢出,例如在Python里都是Nan,使迭代无法继续下去。TensorFlow里提供了一系列简单可行的梯度裁剪函数,方便我们对超过阈值的梯度值进行规约,使优化算法相对更加数值稳定。 TensorFlow里提供的几个Gradient Clipping函数都是以clip_by开头,分别是tf.clip_by_nor..._tensorflow梯度裁剪

Chromium书签同步无法连接到服务器的解决办法-程序员宅基地

文章浏览阅读438次。问题:书签同步时可能会无法连接服务器。解决办法:只需将浏览器语言设为英文即可顺利连接。转载于:https://www.cnblogs.com/jiels/archive/2010/03/08/1681133.html..._vr chromium无法连接

python(opencv) SVM 测试使用_vscode中python如何使用svmutil-程序员宅基地

文章浏览阅读3.1k次,点赞3次,收藏11次。(SVM简单的编写)编辑器环境:VsCode , Pycharm所需要的文件:正样本文件件(存放正样本图片-需要train 的图片)负样本文件夹(存放负样本的图片)测试文件夹(测试图片的存放)训练的图片最好使用灰度后的二值化图像,跟家好的效果将正负样本放到同一个 samples 和labels里面,使用SVM train 去训练图片。注意正负样本的大小需要一致。import osimport cv2import numpy as npdef date_load(): _vscode中python如何使用svmutil

Linux安装Tomcat-程序员宅基地

文章浏览阅读105次。linux安装tomcat之前,先使用命令java -version查看java版本,因为有些linux已经默认安装了Open JDK,如果没有出现java相关信息,则不用管了,如果出现,我们需要替换掉默认安装的JDK;卸载1、卸载用 bin文件安装的JDK方法: 删除/usr/java目录下的所有东西2、卸载系统自带的jdk版本方法:查看自带的j..._root 2300 2152 0 01:49 pts/0 00:00:00 grep --color tomcat

windows的虚拟磁盘(vhd,vhdx)使用_gho文件安装系统到vhd-程序员宅基地

文章浏览阅读3.4k次。windows的虚拟磁盘(vhd,vhdx)使用以前一直使用u盘或者移动硬盘接上usb直接拷贝文件,发觉速度一般。而且一般只有一个盘,分类也很不方便。后来发现windows的虚拟磁盘可以解决我的问题。。。经过一段时间的使用后发觉使用虚拟磁盘的方式好处还是很多的,比如文件的传输速度是比直接在u盘上是要快的。如果容量大的u盘还可以放几个vhdx文件加载后就是n个磁盘。下面记录下使用方式:1、打开磁盘管理工具。 快捷键:WIN+R弹出运行窗口,输入:diskmgmt.msc命令,..._gho文件安装系统到vhd

随便推点

软考证书如何评职称?_软考评职称-程序员宅基地

文章浏览阅读1.9w次,点赞14次,收藏33次。文章目录1. 什么是职称2. 软考3. 软考和职称的关系3.1 软考3.2 职称资格3.3 职称3.4 三者之间的关系3.5 软考证书改版后的变化1. 什么是职称我们在拿到软考证书后,很多人最关心的一个问题就是关于职称评聘问题,今天就以软考证书如何申请评中级职称及职称申请流程的详细介绍,希望可以帮到大家。所谓职称其实是一个专业技术职务,每个单位根据上级单位要求设置相应比例的高、中、初级专业..._软考评职称

使用SaaS鉴权用户,以加快应用开发_用saas登录鉴权的-程序员宅基地

文章浏览阅读3.1k次。新一代的云服务不再要求应用开发者编写服务器端代码。几乎所有的应用都依赖服务器端的业务逻辑,回调为App 提供服务的API。应用依赖服务器来分析,存储数据,通讯,并与现有系统集成。虽然通用服务如分析一般都外包给专业服务商,许多开发者还是需要编写服务器端代码来支持他们应用的功能,特别是你编译要与后端系统集成的企业级应用时。把配置和业务逻辑放到服务器端是个好办法,这样你可以很快更新内容和业务规则。_用saas登录鉴权的

web期末作业网页设计实例代码 (建议收藏) HTML+CSS+JS (网页源码)_网页(web )程序设计-程序员宅基地

文章浏览阅读564次,点赞10次,收藏9次。网站布局方面:计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程序方面:计划采用最新的网页编程语言HTML5+CSS3+JS程序语言完成网站的功能设计。并确保网站代码兼容目前市面上所有的主流浏览器,已达到打开后就能即时看到网站的效果。网站素材方面:计划收集各大平台好看的图片素材,并精挑细选适合网页风格的图片,然后使用PS做出适合网页尺寸的图片。网站文件方面:网站系统文件种类包含:html网页结构文件、css网页样式文件、js网页特效文件、images网页图片文件;_网页(web )程序设计

Chrome多设备书签同步_chrome标签怎么在不同电脑上同步-程序员宅基地

文章浏览阅读416次。架梯子,使用v2ray结合SwitchyOmega,其中SwitchyOmega设置自动切换,chrome://sync网站配置为使用代理; 重启chrome,关键,不然第3步没反应; 进入chrome://sync,点Trigger GetUpdates(不点也行,会自动更新)_chrome标签怎么在不同电脑上同步

对比度限制直方图均衡化CLHE-程序员宅基地

文章浏览阅读320次。其实实现了半个月了,不过一直没更新,囧。上次讲到对比度限制的直方图均衡化,纠结了一段时间。不知道为什么思维总是会想到改变图像的像素值,其实CLHE的目的是获取一个不那么陡峭的转换的映射函数,所以操作只要在直方图层面完成就行了。确定阀值,切割直方图,将大于阀值的面积平均分到各个bins(之前就在纠结这里……),得到一个CL的直方图之后再求映射函数,并不用对原图进行操作。代码..._编写函数文件“cl_histeq_名字拼音.m”,实现对比度限制的直方图均衡化功能

系统设计与分析homework3_系统设计缺点分析-程序员宅基地

文章浏览阅读633次。系统设计与分析homework3本次作业不仅完成了基本的简答题,还了解如何使用 TAPD(腾讯敏捷产品研发平台)一. 简答题1. 简述瀑布模型、增量模型、螺旋模型(含原型方法),并分析优缺点从项目特点、风险特征、人力资源利用角度思考a. 瀑布模型简述瀑布模型(Waterfall Model) 是一个项目开发架构,开发过程是通过设计一系列阶段顺序展开的,从系统需求分析开始直到产品..._系统设计缺点分析

推荐文章

热门文章

相关标签