rxjs fromEvent的源代码实现分析

简介: rxjs fromEvent的源代码实现分析

源代码:

 ngOnInit(): void {
    fromEvent(document, 'click')
  .pipe(
    // restart counter on every click
    map(() => interval(1000))
  )
  .subscribe(console.log);
  }

同样返回一个新的Observable:image.png

参数target:document DOM:image.png

使用的事件注册机制还是浏览器的原生实现:addEventListener:image.png

点击浏览器窗口任意位置,触发handler:image.png

传递给下一个执行链的是MouseEvent对象:image.png

进入interval.js:image.png

返回一个新的Observable:image.png

intervals返回一个Observable对象,交个下一个destination处理,即我们应用程序的console.log代码:image.pngimage.png

相关文章
|
5月前
|
C++
【C++】bind绑定包装器全解(代码演示,例题演示)
【C++】bind绑定包装器全解(代码演示,例题演示)
|
前端开发
rxjs Observable 设计原理背后的 Pull 和 Push 思路
rxjs Observable 设计原理背后的 Pull 和 Push 思路
|
2月前
|
C++ 容器
【CPP】队列简介及其简化模拟实现
【CPP】队列简介及其简化模拟实现
|
4月前
|
监控 Serverless Linux
函数计算操作报错合集之安装模块时遇到错误,该如何处理
在使用函数计算服务(如阿里云函数计算)时,用户可能会遇到多种错误场景。以下是一些常见的操作报错及其可能的原因和解决方法,包括但不限于:1. 函数部署失败、2. 函数执行超时、3. 资源不足错误、4. 权限与访问错误、5. 依赖问题、6. 网络配置错误、7. 触发器配置错误、8. 日志与监控问题。
|
JavaScript 算法 调度
不一样的叙述思路 | 一步一步带你了解 vue3 的内部队列
不一样的叙述思路 | 一步一步带你了解 vue3 的内部队列
174 0
|
前端开发
前端学习案例4-promise封装详解4 原
前端学习案例4-promise封装详解4 原
66 0
前端学习案例4-promise封装详解4 原
|
前端开发
#yyds干货盘点 【React工作记录七】如何对数组进行一个过滤操作map
#yyds干货盘点 【React工作记录七】如何对数组进行一个过滤操作map
103 0
#yyds干货盘点 【React工作记录七】如何对数组进行一个过滤操作map
|
XML 前端开发 数据格式
使用 ES6 的展开运算符简化传递 props 数据的过程|学习笔记
快速学习使用 ES6 的展开运算符简化传递 props 数据的过程
132 0
使用 ES6 的展开运算符简化传递 props 数据的过程|学习笔记
|
前端开发 JavaScript 测试技术
React实战之数据流方向与项目初始化
React实战之数据流方向与项目初始化
React实战之数据流方向与项目初始化
|
XML 数据格式
使用ES6的展开运算符简化传递props数据的过程
使用ES6的展开运算符简化传递props数据的过程
使用ES6的展开运算符简化传递props数据的过程