浅谈异步编程

浅谈异步编程

引子

页面渲染与setTimeout();

同步与异步------我的理解

任务在当次事件循环中阻塞后续任务进行的（指的是耗时较多，这个多少，暂时还没有个概念，反正就是在获取的cpu时间片中不做实际事情的就是阻塞吧），就是同步；任务在当次事件循环中不阻塞后续任务进行的（简单的可以理解为，一条流水线上，某个步骤要检测是否合格，不影响流水线的情况下，由流水线之外的工作人员，相当于worker，去做这件事情），就是异步；

异步编程重要js设计模式-------发布订阅者模式

• 现实中的异步----------买车

小明要买车，小红告诉他现在车还没到，到的时候再打电话给他，于是小明留下了联系方式（订阅）。等到一段时间后，车到了，小红打电话给小明车到了（发布），小明在接到电话之后，要做一些准备（订阅时定义的回调函数）。

• 工作中的异步

通过事件实例去做调控，简单的代码示例：

// emitter是一个事件实例，负责发布订阅者的内部实现

// 订阅
emitter.on('eventName', function () {
    dosomeThing();
});

// 发布
// 另一端程序干一些事情。好了~时机到了，就：
emitter.emit('eventName');

发布订阅者模式其实在代码执行顺序上就是：订阅（监听）------> 发布（触发）

• 传统异步编程

通过高阶函数实现

// 定义高阶函数
var asyncFn = function (cb) {
    // dosomeThing async...
    typeof === 'function' && cb();
};
// 使用
asyncFn(function (res) {
    // dosomeThing callback...
});

• 现在比较常用的Promise

var asyncFn = function () {
    // dosomeThing sync...
    Promise.resolve(); // 通常用于当次事件循环（或者当前线程执行）结束之后才需要干的事情
}

// 码段1
let asyncFn = new Promise((resolve, reject) => {
    resolve('完成');
});

asyncFn.then((res) => {
    console.log(res);
});
console.log('同步');

码段1 执行结果:

VM51728:1 同步执行
22:26:27.891 VM51728:1 完成
22:26:27.891 undefined

产生异步的情况

• setTimout()
• setInterval()
• requestAnimationFrame()
• Promise.resolve()方法
• 各种ajax异步请求
• Vue的nextTick()方法,由三种方式实现
• jsonp加载方式
• ...