在实际开发中,一定有情况是这样的,一个页面我们有多个地方请求了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效果消失的更多相关文章

  1. js图片未加载完显示loading效果

    <html> <title>js图片未加载完显示loading效果</title> <body> <style> img{float:lef ...

  2. 页面加载完毕后调用js方法进行布局操控 已实验

    页面加载完毕后调用js方法进行布局操控 已实验 $(function(){ var check1 = $("[id$=SMS]").is(':checked'); var bl=$ ...

  3. 在css加载完毕后执行后续代码

    最近在写项目的framework,写个JQueryMessageBox的类,以使用jquery ui中的dialog()来显示消息框,为了使方法方便调用,便加入了自动判断页面是否加入了ui.js和ui ...

  4. php页面加载完毕后再显示购买按钮

    php页面加载完毕后再显示购买按钮 $document.ready(function(){ $("#buybotton").show()})

  5. js实现的页面加载完毕之前loading提示效果

    页面加载readyState的五种状态 原文如下: 0: (Uninitialized) the send( ) method has not yet been invoked. 1: (Loadin ...

  6. JS实现页面加载完毕之前loading提示效果

    1.获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.docu ...

  7. HTML页面加载完毕后运行的js

    Js方法:<script type=”text/javascript”> window.onload=function (){ var userName=”xiaoming”; alert ...

  8. 两种方法实现在HTML页面加载完毕后运行JS

    JS默认方法: <script type=”text/javascript”> window.onload=function (){ /*代码区域*/ } </script> ...

  9. appcloud 加载第三方页面loading效果

    apiready = function() { var header = $api.byId('header'); $api.fixIos7Bar(header); var headerPos = $ ...

随机推荐

  1. 任务十六:零基础JavaScript编码(四)

    任务目的 在上一任务基础上继续JavaScript的体验 深入学习JavaScript的事件机制及DOM操作 学习事件代理机制 学习简单的表单验证功能 学习外部加载JavaScript文件 任务描述 ...

  2. 关于cookie的详解

    http://www.cnblogs.com/fish-li/archive/2011/07/03/2096903.html

  3. Vc code

    通达信L2行情接口, 包括普通行情接口所有功能, 并新增了十档行情, 逐笔成交,买卖队列和深圳逐笔委托(上海证券交易所不对外提供逐笔委托数据)这四个新功能. // TdxHqDemoCpp.cpp : ...

  4. 关于单一网络适配器拓扑TMG

    单网络适配器拓扑的功能 在单网络适配器拓扑中可以实现有限的 Forefront TMG 功能,其中包括: 针对 HTTP.HTTPS 和 CERN 代理 FTP 的正向 (CERN) 代理(仅限下载) ...

  5. GO语言(七)多核并行化的问题

    package main import "fmt" type Vector []float64 func (v Vector) DoSome(i,n int, u Vector, ...

  6. SAP Cloud for Customer销售订单External Note的建模细节

    SAP Cloud for Customer的销售订单创建页面里,我们可以给一个订单维护External Note,当这个订单同步到S/4HANA生成对应的生产订单后,这个note可以作为备注提示生产 ...

  7. CodeIgniter框架学习要点

    以下内容从兄弟连的CI教学视频中摘抄: http://codeigniter.org.cn/tutorials/ ------------------------------------------- ...

  8. hdu-3524 Perfect Squares---打表+找规律+循环节

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=3524 题目大意: 求i^2 mod 2^n有多少可能 解题思路: 先打表,求出n较小的时候的数据 n ...

  9. css3的代替图片的三角形

    1.小三角形(与边框结合,不兼容IE8) .callout{ position: relative; width: 100px; height: 100px; background: #fce6ed; ...

  10. 2019.1.4 SSH框架整合步骤(一)

    SSH整合 1.三大框架整合原理 Spring与Struts2整合就是将Action对象交给Spring容器负责创建 Spring与Hibernate整合就是将sessionFactory交给Spri ...