专栏首页coding个人笔记js异步并行和串行

js异步并行和串行

最近学了学webpack的插件,其实挺简单的,webpack本质上是一种事件流机制,核心是tapable(不是table),通过事件的注册和监听,触发函数方法。所以写插件就是通过暴露给我们的方法去注册和调用。

tapable主要是同步和异步,异步分为并行和串行,今天主要是学习一下异步的并行和串行,才能更好理解tapable。现在实现异步的有很多,比如promise、generator、async await,用这些去实现异步的并行和串行非常简便,promise的all方法就是异步的并行。

异步并行:

我觉得应该不需要解释,就是几个异步同时执行,最后一个执行完毕调用一下回调方法,简单实现:

class AsyncParallel{

constructor() {

this.cbList = [];

}

tap(fn) {

this.cbList.push(fn);

}

call(end){

let index = 0;

this.cbList.forEach(fn => {

fn(() => {

index++;

if(index === this.cbList.length){end()};

});

})

}

}

let ap = new AsyncParallel();

ap.tap((cb) => {

setTimeout(() => {

console.log(1);

cb();

}, 3000)

})

ap.tap((cb) => {

setTimeout(() => {

console.log(3);

cb();

}, 1000)

});

ap.call(() => {

console.log('end');

})

异步串行:

第一个执行完执行下一个,其实就是用一个next方法去判断执行下一个,简单实现:

class AsyncSerial{

constructor() {

this.cbList = [];

}

tap(fn) {

this.cbList.push(fn);

}

call(end){

let index = 0;

let next = () => {

if(index === this.cbList.length){

end();

return;

}

let fn = this.cbList[index];

fn(() => {

index++;

next();

})

}

next();

}

}

let ap = new AsyncSerial();

ap.tap((cb) => {

setTimeout(() => {

console.log(1);

cb();

}, 3000)

})

ap.tap((cb) => {

setTimeout(() => {

console.log(3);

cb();

}, 2000)

});

ap.call(() => {

console.log('end');

})

大概就是这样,继续扩展就会复杂很多,比如是否要把结果传递下去,中间报错是否就终止,返回值如果不是undefined是否继续等,如果使用promise会更简单一些。然后建议去看看tapable,里面可以实现的会更多跟复杂,如果想学习webpack内部一些机制,tapable是一定要了解的。

(完)

Coding 个人笔记

本文分享自微信公众号 - coding个人笔记(gh_2ce38b49dae1),作者:coding个人笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2020-08-26

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 实现一个Promise之基础、异步

    其实跟着promise a+一步一步,按照顺序实现一个promise并不难,今天先实现最简单的promise和异步resolve。本来想全部一次性写完,想想还是...

    wade
  • 用vue实现一个虚拟列表

    上次分享了超长列表分片加载的方式,这种方式现在一般不会使用,因为dom会变的无比庞大,页面会很卡,今天分享用vue实现一个虚拟列表的简易实现,本来是想用原生实现...

    wade
  • vue上拉加载更多组件

    我想,工作一段时间的都碰见过上拉加载更多需求,现在这种插件也蛮多的,也很多是把上拉加载下拉刷新结合。但是这些组件都有一个问题,就是下拉到最底部,刷新浏览器,浏览...

    wade
  • Vuex原来可以这样上手

         在Mvc模式大行其道的今天,后端通过各种Mvc框架实现视图与数据模型的隔离,而前端这方面也发展迅速。vue实现了Dom与viewModel双向绑定,使...

    sam dragon
  • 什么是网络安全等保制度

    随着时间推移《网络安全法》的施行,网络环境早已变成继“海、陆、空、天”以后的第五个国家安全方面。与此同时网络安全法明确了国家实行网络信息安全等级保护测评规章制度...

    技术分享达人
  • 《javascript数据结构和算法》读书笔记

    它是遵循先进后出(后进先出,LIFO)原则的有序集合。栈的最新数据,称为栈顶,反之,最旧的元素就是栈底。

    一粒小麦
  • 邀您参加 | BigData & Alluxio 交流会-成都站

    点击上方蓝字每天学习数据库 | 导语 4月27日,在天府之国,与你共享大数据与Alluxio的技术魅力。 ? ? 本期技术沙龙将会聚焦在大数据、存储、数据库以...

    腾讯云数据库 TencentDB
  • 如何在实时操作系统(RTOS)中使用GCC的栈溢出保护(SSP)功能

    本文是对http://antoinealb.net/programming/2016/06/01/stack-smashing-protector-on-mic...

    coderhuo
  • Python中Json解析的坑

    JSON虽好,一点点不对,能把人折腾死: 1、变量必须要用双引号 2、如果是字符串,必须要用引号包起来 Error:Expecting : delimiter:...

    用户1075292
  • 国务院常务会议:确定3条促进文化和旅游消费措施​

    ? 国务院总理李克强7月31日主持召开国务院常务会议,部署加大力度落实就业优先政策,持续保持比较充分的就业;确定适应群众需要促进商品消费和文化旅游的措施,更大...

    腾讯文旅

扫码关注云+社区

领取腾讯云代金券