m.lom599.com_手机版乐白家网址_乐百家手机首页登录

浅析JS异步加载进度条,深入理解js

作者: 手机版乐白家网址  发布:2019-07-10

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷。

展现效果:

新的标准里增加了原生的Promise。

列表组是灵活又强大的组件,不仅能用于显示一组简单的元素,还能用于复杂的定制的内容。列表组可以用来制作列表清单、垂直导航等效果,也可以配合其他的组件制作出更漂亮的组件,列表组在bootstrap框架中也是一个独立的组件,所以也对应有自己独立源码:

1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现.

这里只讨论链式使用的情况,思考一下其中的细节部分。

LESS:list-group.less
SASS:_list-group.scss

图片 1

一,关于 then() 和 catch() 的复习

列表组看上去就是去掉了列表符号的列表项,并且配上一些特定的样式,在bootstrap框架中的基础列表组主要包括两个部分:

实现思路:

then() 和 catch() 的参数里可以放置 callback 函数用来接收一个 Promise的最终结果。

list-group:列表组容器,常用的是ul元素,也可以是ol或div元素

1.当用户点击load button执行异步请求. 调用方法 出现加载条

then() 可以接收一个参数,那么这个 callback 只会在 Promise resolve() 的时候被调用。

list-group-item:列表项,常用的是li元素,也可以是div元素

2.怎么实现进度条呢?

then() 还可以接收第二个参数,那么第二个 callback 用来处理 Promise reject() 的情况。

对于基础列表组并没有做过多的样式设置,主要设置了其间距、边框和圆角等;

1) 在document.body 新增一个div.覆盖浏览器. 设置背景会灰色. z-index =

catch() 专门处理 Promise reject() 的情况。

.list-group {
padding-left: 0;
margin-bottom: 20px;
}
.list-group-item {
position: relative;
display: block;
padding: 10px 15px;
margin-bottom: -1px;
background-color: #fff;
border: 1px solid #ddd;
}
.list-group-item:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
.list-group-item:last-child {
margin-bottom: 0;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
  1. 加载的时候让用户无法修改界面值

也就是说,then() 可以兼用,catch() 只能处理 reject() 的情况。不过,推荐 使用 then() 处理 resolve(),catch() 处理 reject()。

来看一个例子:

2) 在document.body 新增一个动态的div.

二,不过,我要讲的不是上面的东西,以上只是复习一下基本用法。这里开始讲 then() 和 catch() 的返回值和链式用法的细节。

<h1>基础列表组</h1>
<ul class="list-group">
<li class="list-group-item">腊肉土豆焖饭</li>
<li class="list-group-item">香辣风味炸鸡块</li>
<li class="list-group-item">香菜皮蛋豆腐</li>
<li class="list-group-item">荷兰豆炒马蹄</li>
<li class="list-group-item">山楂排骨</li>
<li class="list-group-item">韭菜炒河虾</li>
</ul>

代码实现:

那么官方文档说,then() 和 catch() 都返回一个 Promise ,这个说法就很耐人寻味了。(我是js新手,以前的在野的 promise 我没有接触过)。

图片 2

Main.html:

首先,这个新返回的 Promise 不是原来的 Promise;

带徽章的列表组

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="Loading.js" charset="utf-8"></script>
<link rel="stylesheet" href="Loading.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
<button onclick="showLoading()">Load</button>
</body>
</html>

第二,这个新返回的 Promise 的状态的变化(是resolve()了;还是reject()了。)跟上一个 Promise 的状态 和 then() 的使用方式有关。

带徽章的列表组其实就是将bootstrap框架中的徽章组件和基础列表组件结合在一起的一个效果,具体做法很简单,只需在.list-group-item的基础上追加徽章组件“badge”

  Loading.js:

先说明 then() 的情况:(catch 类似)

实现原理:

function showLoading()
{
var overDiv = document.createElement("div");
var loadingDiv = document.createElement("div");
var childDiv1 = document.createElement("div");
var childDiv2 = document.createElement("div");
var childDiv3 = document.createElement("div");
overDiv.classList.add('over');
loadingDiv.classList.add('spinner');
childDiv1.classList.add('bounce1')
childDiv2.classList.add('bounce2')
childDiv3.classList.add('bounce3')
loadingDiv.appendChild(childDiv1);
loadingDiv.appendChild(childDiv2);
loadingDiv.appendChild(childDiv3);
document.body.appendChild(overDiv);
document.body.appendChild(loadingDiv)
setTimeout(function()
{
document.body.removeChild(overDiv);
document.body.removeChild(loadingDiv)
}, 5000);
}
var p1 = Promise.resolve("Success");
var p2 = p1.then(task1);
var p3 = p2.then(task2);

给徽章设置了一个右浮动,当然如果两个徽章同时在一个列表项中出现时,还设置了它们之间的距离

  Loading.css

注:上面的task1 和 task2 都是callback。

.list-group-item > .badge {
float: right;
}
.list-group-item > .badge   .badge {
margin-right: 5px;
}
.spinner {
width: 150px;
text-align: center;
left: 50%;
top: 50%;
position: absolute;
z-index: 1000;
}
.over {
width: 100%;
height: 100%;
z-index: 998;
background-color: gray;
position:absolute;
top: 0px ;
left : 0px;
opacity: 0.2;
}
.spinner > div {
width: 30px;
height: 30px;
background-color: #67CF22;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}

这里,p1是一个创建出来的 Promise,并且直接 resolve()了;

例子:

 总结:

p2是用then() 得到的一个 Promise, p3也是用then()得到的一个 Promise。

<h1>带徽章的列表组</h1>
<ul class="list-group">
<li class="list-group-item">
13
腊肉土豆焖饭
</li>
<li class="list-group-item">
20
香辣风味炸鸡块
</li>
<li class="list-group-item">
12
香菜皮蛋豆腐
</li>
<li class="list-group-item">
5
荷兰豆炒马蹄
</li>
<li class="list-group-item">
8
山楂排骨
</li>
<li class="list-group-item">
15
韭菜炒河虾
</li>
</ul>

1.可以将方法提出来. 对Ajax请求重新封装一次. 实现调用Ajax请求的时候自动条用进度条方法.

那么p2的状态如何改变呢,p3呢?

图片 3

2.如果是Angular的话. Angular提供了方法监控http调用.监控http执行请求的时候调用进度条方法就行了.无需在每次执行 http调用.监控http执行请求的时候调用进度条方法就行了.无需在每次执行http的时候都去自己调用出现进度条的方法.

我准备用下图来讲解这个概念:

带链接的列表组

以上内容是小编给大家介绍的js异步加载进度条的相关内容,希望对大家有所帮助!

 图片 4

带连接的列表组其实就是每个列表项都具有链接效果,一般让人想到的就是在基础列表组的基础上,给列表项的文本添加链接,如:

您可能感兴趣的文章:

  • JavaScript文件的同步和异步加载的实现代码
  • 详解angularjs利用ui-route异步加载组件
  • JS异步加载的三种实现方式
  • jquery使用EasyUI Tree异步加载JSON数据(生成树)
  • 如何使用headjs来管理和异步加载js
  • 异步加载JS、CSS代码(推荐)
  • 点评js异步加载的4种方式
  • JavaScript异步加载浅析
  • 如何调试异步加载页面里包含的js文件
  • javascript写的异步加载js文件函数(支持数组传参)
  • JavaScript异步加载问题总结

其中,

<ul class="list-group">
<li class="list-group-item"><a href="#">腊肉土豆焖饭</a></li>
<li class="list-group-item"><a href="#">香辣风味炸鸡块</a></li>
<li class="list-group-item"><a href="#">香菜皮蛋豆腐</a></li>
<li class="list-group-item"><a href="#">荷兰豆炒马蹄</a></li>
<li class="list-group-item"><a href="#">山楂排骨</a></li>
<li class="list-group-item"><a href="#">韭菜炒河虾</a></li>
</ul>
  1. 八边形代表一个Promise对象。

  2. 圆形代表一个Promise内部的状态,黑色箭头代表状态变化。

  3. 向右的箭头代表调用 then 函数。

  4. 也就是说,只要调用 then 函数就会生成一个新的 Promise 对象。

  5. 在调用 then 函数的时候,不知道前面一个 Promise 对象的状态是什么,是 pending 还是 settled?这个无法假设,在外界看不见。

  6. then 函数的调用是不会阻塞的,也就是说,几乎是瞬间 p2 和 p3 就是生成了,即使 p1 还在缓慢的迁移它自身的状态。

本文由m.lom599.com发布于手机版乐白家网址,转载请注明出处:浅析JS异步加载进度条,深入理解js

关键词: m.lom599.com