【05】js异步编程理解
1.概念
同步:一个任务等待前一个任务结束,然后再执行,程序的执行顺序与任务的排列顺序是一致的、同步的。异步:每一个任务有一个或多个回调函数(callback),前一个任务结束后,不是执行后一个任务,而是执行回调函数,后一个任务则是不等前一个任务结束就执行,所以程序的执行顺序与任务的排列顺序是不一致的、异步的。
案例分析:
欣多多去火车票代售窗口买票,现在该欣多多购票了,欣多多后面是小王珂,他也等着买票。
同步解析:
欣多多:买一张明天到大理的火车票
售票MM:对不起,明天到大理的火车票已经没有了
欣多多:啊!居然没有了,你等我一下,我打电话问问我女朋友,改买多久的票。 (此时,售票员什么事情都做不了,只得等我打完电话,而我背后的小王珂变得非常的焦躁,心中:“我靠,耽误我时间,浪费我青春,你难道就不知道去一边打电话吗?等我买了票,你差不多也打完了。”)
30秒过去了.....
欣多多:美女,那就换一张后天到大理的火车票吧。
售票MM:好的,给你。
小王珂:买一张去源码时代的火车票,我要去学Web前端.
异步解析
欣多多:买一张明天到大理的火车票
售票MM:对不起,明天到大理的火车票已经没有了
欣多多:好吧,那我先打电话问问我女朋友,问好后,我在跟你说。(一个小的举动,从售票窗口让开)
小王珂:买一张去源码时代的火车票,我要去学Web前端.
售票MM:好的,给你。
.....
.....
欣多多电话打完了
欣多多:美女,那就换一张后天到大理的火车票吧。
售票MM:好的,给你。
1、同步:总是等待上一个任务完成后,才开始下一个任务的执行。
2、异步:开始一个(异步)任务,任务去执行,但是不会让后面的任务等待(阻塞),后面的任务继续执行,(异步)任务执行完毕后,会进行通知(回调)。
2.异步编程实现
2.1 settimeout
setTimeout(callback,ms); //延迟ms毫秒后,执行callback函数,延迟的过程,不会影响后面代码的执行。
运行结果:
1
2----->13
3
4------>31
原因:
2.2事件
事件也是基于函数胡
//fs:文件系统模块,提供对文件的操作
var fs = require("fs");
//创建输出流,读取文件
var stream = fs.createReadStream("./NodeJs-DAY01.docx");
//读取数据事件,每次读取都会触发。
stream.on("data",function(data){
console.log(data);
});
//读取数据完毕
stream.on("end",function(){
console.log("文件读取完毕");
});
2.3promise
Promise(承诺),就是一个对象,用来传递异步操作的消息。它代表了某个未来才会知道结果的事件(通常是一个异步操作),并且这个事件提供统一的 API,可供进一步处理。
Promise 对象有以下两个特点:
(1)对象的状态不受外界影响。Promise 对象代表一个异步操作,有三种状态:Pending(进行中)、Resolved(已完成,又称 Fulfilled)和 Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这也是 Promise 这个名字的由来,它的英语意思就是「承诺」,表示其他手段无法改变。
(2)一旦状态改变,就不会再变,任何时候都可以得到这个结果。Promise 对象的状态改变,只有两种可能:从 Pending 变为 Resolved 和从 Pending 变为 Rejected。只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果。就算改变已经发生了,你再对 Promise 对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
Promise 构造函数接受一个函数作为参数,该函数的两个参数分别是 resolve 方法和 reject 方法。
如果异步操作成功,则用 resolve 方法将 Promise 对象的状态,从「未完成」变为「成功」(即从 pending 变为 resolved);
如果异步操作失败,则用 reject 方法将 Promise 对象的状态,从「未完成」变为「失败」(即从 pending 变为 rejected)。
基本语法:
var promise = new Promise(function(resolve, reject) {
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
promise.then(function(value) {
// success
}, function(value) {
// failure
});
具体使用,可以参照:http://es6.ruanyifeng.com/#docs/promise
【05】js异步编程理解的更多相关文章
- js异步编程
前言 以一个煮饭的例子开始,例如有三件事,A是买菜.B是买肉.C是洗米,最终的结果是为了煮一餐饭.为了最后一餐饭,可以三件事一起做,也可以轮流做,也可能C需要最后做(等A.B做完),这三件事是相关的, ...
- 前端分享----JS异步编程+ES6箭头函数
前端分享----JS异步编程+ES6箭头函数 ##概述Javascript语言的执行环境是"单线程"(single thread).所谓"单线程",就是指一次只 ...
- JS异步编程 (2) - Promise、Generator、async/await
JS异步编程 (2) - Promise.Generator.async/await 上篇文章我们讲了下JS异步编程的相关知识,比如什么是异步,为什么要使用异步编程以及在浏览器中JS如何实现异步的.最 ...
- JS异步编程 (1)
JS异步编程 (1) 1.1 什么叫异步 异步(async)是相对于同步(sync)而言的,很好理解. 同步就是一件事一件事的执行.只有前一个任务执行完毕,才能执行后一个任务.而异步比如: setTi ...
- 一个例子读懂 JS 异步编程: Callback / Promise / Generator / Async
JS异步编程实践理解 回顾JS异步编程方法的发展,主要有以下几种方式: Callback Promise Generator Async 需求 显示购物车商品列表的页面,用户可以勾选想要删除商品(单选 ...
- JS魔法堂:深究JS异步编程模型
前言 上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...
- 深究JS异步编程模型
前言 上周5在公司作了关于JS异步编程模型的技术分享,可能是内容太干的缘故吧,最后从大家的表情看出"这条粉肠到底在说啥?"的结果:(下面是PPT的讲义,具体的PPT和示例代码在h ...
- 【WCF--初入江湖】05 WCF异步编程
05 WCF异步编程 一.服务设计最佳实践 在设计之初,是否用异步,应该由客户端来决定,而不应该去考虑服务的调用者调用的方式. 优点:充分利用多核CPU, 改善用户体验 缺点:滥用异步,会影响性能 二 ...
- node.js异步编程的几种模式
Node.js异步编程的几种模式 以读取文件为例: 1.callback function const fs = require('fs'); //callback function fs.readF ...
随机推荐
- 更改yum网易、阿里云的yum源
更改yum源为网易的. 首先备份/etc/yum.repos.d/CentOS-Base.repomv /etc/yum.repos.d/CentOS-Base.repo /etc/yum.repos ...
- 记录JQ-WEUI中滚动加载的一个BUG
最近写微信公众号,用到的技术栈是jq+vue的混合开发,采用的UI是移动端比较火的WEUI,在微信开发中应该较广泛.个人看惯了elementUI文档,相对于饿了么组件文档的详细,WEUI的文档还是比较 ...
- Mint UI文档
Mint UI文档:http://elemefe.github.io/mint-ui/#/ 一.Mint UI的安装和基本用法. 1.NPM :npm i mint-ui -S 建议使用npm进行安装 ...
- win10如何修改host文件
首先找到host文件,一般位于:C:\Windows\System32\drivers\etc 之后用记事本打开,直接修改.保存txt文件到桌面. 最后删除后缀名,再粘贴回去就可以了.
- 洛谷P3371单源最短路径Dijkstra堆优化版及优先队列杂谈
其实堆优化版极其的简单,只要知道之前的Dijkstra怎么做,那么堆优化版就完全没有问题了. 在做之前,我们要先学会优先队列,来完成堆的任务,下面盘点了几种堆的表示方式. priority_queue ...
- 【Ecshop】v2.7.3模板变量标签改进
改进代码后虽可解决大多数函数参数的问题,但也同样产生了参数问题:ecshop模板函数参数有部分没有被引号包裹,所以正则并不能匹配到,要修改为引号包裹,那是个大工程. 为了使ecshop模板支持date ...
- Flask初学者:URL(传参,请求,重定向)
URL传参: 良好的URL:视图函数对应的url以/结尾是一种良好url,因为用户在访问的时候无论他有没有加上最后这个斜杠,都是能访问到的,相反,视图函数的url没有以/结尾,用户访问的时候却加上了这 ...
- 指针的操作 p*++
int x, y, *px = &x, *py = &y; y = *px + ; //表示把x的内容加5并赋给y,*px+5相当于(*px)+5 y = ++*px; //px的内容 ...
- 模拟:HDU1034-Candy Sharing Game
解题心得: 1.直接模拟每一次分一半就行了,模拟过程,记录轮数,但是也看到有些大神使用的是链表,估计链表才是真的做法吧. 题目: Candy Sharing Game Time Limit: 2000 ...
- 11、python中的函数(基础)
一.什么是函数? 在数学中,x2+2x2+3=10这样的叫方程. 而ax2+bx2+c=d这样的才叫函数.数学的函数中,abcd等待输入的未知量叫自变量,它需要我们自己去输入,而x这种待求得未知量叫因 ...