【代码】javascript - （异步/非异步）

文章目录

# 异步
# 非异步

# 异步

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>div {height: 30px;background: #8e44ad;width:0px ;display: flex;justify-content: center;align-items: center;font-size: 30px;color: #fff;}</style>
</head><body><div id="loading">0%</div>
</body>
<script src="./dist/ajax.js"></script>
<script>function query(name) {let url = `http://localhost:3000` ;return ajax(`${url}/users?name=${name}`) ;}(async ()=>{let users = ['茵蒂克丝','御坂美琴','白井黑子','佐天泪子','初春饰利'];let len = users.length;for(let i=0;i<len;i++) {let user = await query(users[i]) ;let progress = ((i+1)/len)*100;loading.style.width = progress+'%';loading.innerHTML = Math.round(progress)+'%' ;console.log(user.length>0?user : '没有数据')}})()
</script>
</html>

ajax.js
这里加了延时哦，为了看出效果

class ParamError extends Error{constructor(msg) {super(msg) ; this.name = 'ParamError' ;}
}
class HttpError extends Error { constructor(msg) {super(msg) ;this.name = 'HttpError' ;}
}
class WebAssert {static isURL(url) {if(!/^https?:\/\//i.test(url)) {throw new ParamError('请求地址格式错误')}}
}
function ajax(url) {return  new Promise((resolve, reject) => {WebAssert.isURL(url) ;let xhr = new XMLHttpRequest() ;xhr.open('GET', url) ;// xhr.readyState==4 ==> xhr.onloadxhr.onload = function(result) {if(this.status == 200) {resolve(JSON.parse(this.response) ) ;}else if(this.status ==404) {// throw new HttpError('用户不存在'); 这样是不行的，因为在新线程里面reject(new HttpError('用户不存在'))}else{reject('加载失败')}}xhr.onerror = function() {reject(this)}setTimeout(() => {xhr.send() ;}, 1000);})
}

用了 mock工具： jsonserver

其中 db.json

{"users": [{"id":1, "name":"御坂美琴", "email":"jdbc@qq.com"},{"id":2, "name":"茵蒂克丝", "email":"c3p0@qq.com"}],"lessons": [{"id":1 ,"js":60, "ts":89},{"id":2 ,"js":33, "ts":10}]
}

# 非异步

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>* {padding: 0;margin: 0;}body {display: flex;font-size: 3em;padding: 30px;color: #34495e;}div {background: #3498db;text-align: center;}</style>
</head><body><div id='hd'></div>
</body><script>function handle() {let i = 0;(function run() {hd.innerHTML = i + "%";hd.style.width = i + "%";if (++i <= 100) {setTimeout(run, 100);}})()}handle();
</script></html>

【代码】javascript - （异步/非异步） - 进度条相关推荐

php js 进度条,JavaScript实现简单动态进度条效果
这篇文章主要为大家详细介绍了JavaScript实现简单动态进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js实现动态进度条效果的具体代码,供大家参考,具体内容如下 ...
VBA代码为ppt添加页码进度条
VBA代码为ppt添加页码进度条 fandroid 于 2015-05-25 15:31:28 发布 4617 已收藏 5 分类专栏: office 文章标签: vba ppt 版权 office ...
异步下载圆形进度条显示进度
圆形进度条参考链接即可:使用css3实现圆形进度条需求点击下载后遮罩层显示下载进度: 1.圆形进度条参考以上链接,有点小瑕疵,可更改定位距离实现重合. 2.遮罩层: .lbOverlay{ disp ...
python文本进度条代码解释_python动态文本进度条的实例代码
如何实现动态单行刷新,答案是:覆盖但是怎么实现覆盖呢? 关键在于不换行而且能回退到开始位置那么就要用到 \r 这个东西就是让光标回退到当前行初始位置记得不能让换行代码片段:#文本进度条.py ...
Flutter 一行代码快速实现你的进度条
本文由通密公众号(tongmi5g),QQ群(174353204)提供,欢迎关注获取技术支持,有任何问题群里都会回复. 用flutter开发的项目,最大的好处除了跨平台之外,还有一点就是插件多,便于很 ...
Java 代码实现一个标准输出的进度条，知识点你知道但并不一定会用
最近阿粉在折腾一台服务器,折腾的过程中往往会需要安装很多依赖软件,有的是在官网下载压缩包,有的是通过系统命令直接安装,在通过系统命令直接安装的时候,就会有类似下面的进度条出现. 进度条在我们日常使用的 ...
解读奥哲·云枢：低代码拉动“企业数字化转型”进度条
世界上有两种生意:一种是标准化,一种是个性化. 20世纪初,美国亨利·福特提出了大规模生产方式.由于可以带来成本的大幅降低,大规模生产方式推动了汽车行业长达半个多世纪的发展,几乎被北美和欧洲的每一种工 ...
简单C#代码制作动画播放绑定进度条
C# 代码 DoubleAnimation daanimation = new DoubleAnimation();//创建动画 daanimation.From = 0;// ...
如何用HTML语言设计进度条,html5代码如何实现进度条功能？（示例）
本篇文章主要介绍html5代码如何实现进度条功能,希望对大家有所帮助. html5代码实现进度条功能具体代码示例如下:/*实现进度条的功能*/ 下载进度: /*js代码*/ var pg=docume ...

【代码】javascript - （异步/非异步） - 进度条

文章目录

# 异步

# 非异步

【代码】javascript - （异步/非异步） - 进度条相关推荐

最新文章

热门文章