VueBloghyhero6

关于 JS 的 event loop 事件循环

2019-05-05 / 2019-05-05 / 170次浏览

关于事件循环,首先声明JS 是单线程语言,造成它是一种单线程语言的原因就是,我记得一片文章上面说过,多个线程并行一个状态点击,一个状态取消,浏览器要听谁的。

在者说JS 是没有线程概念的。所谓的单线程也是对多线程而言。

再换句来讲,JS 在浏览器中是单线程的 ,叫作JavaScript的引擎进程。

但是浏览器是多进程的,比如说渲染线程,浏览器事件触发线程,http请求线程等。

event-loop 事件循环,
在谈事件循环之前,我们明确几点概念。
第一,JS 的单线程 针对于其他语言的多线程而言,其实本质JS 没有单线程概念。
第二,JS 基于浏览器的JS引擎是单线程,也就是基于浏览器的JS 是单线程的。但是浏览器本身是多线程的,比如浏览器在渲染页面的同时,开启拉取请求线程。存在多个线程并行。

在 ES6的时候引入了一个名为“任务队列”的概念。它是事件循环上的一层,最为常见在Promises 处理的异步方式。

这就意味着 可以放心添加另一个功能以便稍后执行,它将在其他任何事情前立即执行。

目前ES6 的新特性并非所有浏览器支持,仅在高级浏览器中支持,所以来说想用,目前比较靠谱的做法是引用类库和babel编译。

实际讲,即使是使用promise 依旧会回陷入回调地狱之中,但是比ajax 层层嵌套要好些。

直到 ES8 引入了Async/await (异步/等待),nodejs 支持直接使用。

粘贴别人一组伪代码
`var loadData = async function() {
// is a request-promise function.
var promise1 = rp('https://api.example.com/endpoint1');
var promise2 = rp('https://api.example.com/endpoint2');

// Currently, both requests are fired, concurrently and
// now we'll have to wait for them to finish
var response1 = await promise1;
var response2 = await promise2;
return response1 + ' ' + response2;

}`

同步写法表达了异步,清晰简洁。
这里在提一下,redux saga 的异步处理方法,
这里在提一下,redux saga 的异步处理方法,

yiled

英 [jiːld] 美 [jiːld]

v.

出产(作物);产生(收益、效益等);提供;屈服;让步;放弃;缴出

n.

产量;产出;利润

和 * 函数构造器, Generator

export function* incrementAsync() { yield call(delay, 2000) yield put({ type: 'INCREMENT' }) }

call 提交函数, put 提交常量,
takeEvery 监听函数