开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

为什么setTimeout()让我的应用变得迟缓，而Rxjs timer().subscribe(...)不是吗？

setTimeout()是JavaScript中的一个函数，用于在指定的时间后执行一段代码。它的工作原理是将代码放入事件队列中，等待指定的时间后执行。然而，由于JavaScript是单线程的，当执行时间到达时，如果此时主线程正在执行其他任务，setTimeout()的代码就会被延迟执行，导致应用变得迟缓。

相比之下，RxJS是一个响应式编程库，timer()是其中的一个操作符，用于创建一个定时器。它的工作方式是创建一个Observable对象，该对象会在指定的时间后发出一个值，然后完成。通过使用subscribe()方法订阅这个Observable对象，我们可以在指定的时间后执行相应的操作。

RxJS的timer().subscribe(...)不会导致应用变得迟缓的原因是，它是基于事件驱动的异步编程模型。它会在指定的时间后触发一个事件，而不会阻塞主线程的执行。这意味着即使在定时器触发之前，主线程仍然可以继续执行其他任务，不会导致应用的延迟。

总结起来，setTimeout()会导致应用变得迟缓的原因是它的执行方式会阻塞主线程，而RxJS的timer().subscribe(...)不会阻塞主线程，因此不会导致应用变得迟缓。

腾讯云相关产品和产品介绍链接地址：

云函数（Serverless）：https://cloud.tencent.com/product/scf
云服务器（CVM）：https://cloud.tencent.com/product/cvm
云数据库 MySQL 版（CMYSQL）：https://cloud.tencent.com/product/cdb_mysql
云原生应用引擎（TKE）：https://cloud.tencent.com/product/tke
云存储（COS）：https://cloud.tencent.com/product/cos
人工智能（AI）：https://cloud.tencent.com/product/ai
物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
移动开发（移动推送）：https://cloud.tencent.com/product/umeng
区块链（BCS）：https://cloud.tencent.com/product/bcs
元宇宙（QingCloud）：https://cloud.tencent.com/product/qingcloud

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

3 分钟温故知新 RxJS 【创建实例操作符】

这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。 ---- 前不久写了 3 篇关于 RxJS 的入门级文章：你就是函数响应式编程（FRP）啊？!...【附 RxJS 实战】 为什么说：被观察者是 push 数据，迭代者是 pull 数据？探秘 RxJS Observable 为什么要长成这个样子？！...，包括链式调用、惰性输出值、隔离数据和操作、响应式编程等等；它是函数式编程中 monad 的一种实际应用；它是 promise 的进化形态；它是理解 JS 异步、处理异步的宝剑.........(resolve, reject) => { setTimeout(() => { resolve('Hello RxJS!')...// RxJS v6+ import { timer } from 'rxjs'; /* timer 接收第二个参数，它决定了发出序列值的频率，在本例中我们在1秒发出第一个值，然后每2秒发出序列值

6144 0

构建流式应用：RxJS 详解

，则清除上一个定时器 clearTimeout(timer); // 定时器，在 250 毫秒后触发 timer = setTimeout(() => {...) timer = setTimeout(() => { // 声明一个当前所搜的状态变量 currentSearch ＝ '书';...(Observer) streamA.subscribe(v => console.log(v)); 将上面代码改用链式写法，代码变得十分简洁： Rx.Observable.of(2).subscribe...使用 RxJS 一步步实现搜索示例 RxJS 提供许多创建流或操作流的接口，应用这些接口，我们来一步步将搜索的示例进行 Rx 化。...最终实现如下，与一开始的实现进行对比，可以明显看出 RxJS 让代码变得十分简洁。

7.3K3 1

RxJS实现“搜索”功能

这是我参与「掘金日新计划 · 4 月更文挑战」的第5天，点击查看活动详情。 ---- 闲言少叙，直接开冲！...timer = setTimeout(() => { console.log('发起请求..'); },300) // 300 后毫秒触发； }) </script...) timer = setTimeout(() => { var searchText = e.target.value; $.ajax(...这个时候，只能献祭出终极解决方案：本篇主角 —— RxJS 了，其实不止有 JS 的 RxJS，与之对应的还有，RxJava、RxAndroid、RxSwift，它们都是处理异步编程的【核武器库】； RxJS...，进行后续的传递；至此，我们可以得出：RxJS 让代码变得十分简洁、可读，前提是，我们熟悉事件流这个东西，熟悉它的 API~~ ---- OK，以上便是本篇分享，希望对你能有所帮助~觉得不错，给个三连吧

5441 0

80 行代码实现简易 RxJS

除此以外，RxJS 的设计还遵循了函数式、流的理念。直接讲概念比较难理解，不如我们实现一个简易的 RxJS 再来看这些。...RxJS 的使用 RxJS 会对事件源做一层封装，叫做 Observable，由它发出一个个事件。...综上，使用 RxJS 的代码就是这样的： const source = new Observable((observer) => { let i = 0; const timer = setInterval...再来看最开始的那些理念： 为什么叫做响应式呢？因为是对事件源做监听和一系列处理的，这种编程模式就叫做响应式。 为什么叫函数式呢？...因为每一步 operator 都是纯函数，返回一个新的 Observable，这符合函数式的不可变，修改后返回一个新的的理念。 为什么叫流呢？

1.3K1 0

Angular快速学习笔记(4) -- Observable与RxJS

介绍RxJS前，先介绍Observable 可观察对象（Observable）可观察对象支持在应用中的发布者和订阅者之间传递消息。可观察对象可以发送多个任意类型的值 —— 字面量、消息、事件。...RxJS 库 RxJS（响应式扩展的 JavaScript 版）是一个使用可观察对象进行响应式编程的库，它让组合异步代码和基于回调的代码变得更简单,RxJS 提供了一种对 Observable 类型的实现...为什么NG使用observable而不是Promise？可观察对象不会修改服务器的响应（和在承诺上串联起来的 .then() 调用一样）。...如果已发出的 AJAX 请求的结果会因为后续的修改而变得无效，那就取消它。...如果使用承诺和其它跟踪 AJAX 调用的方法会非常复杂，而使用可观察对象，这非常简单： import { pipe, range, timer, zip } from 'rxjs'; import {

5K2 0

创建 Observable

需要注意的是，很多人认为 RxJS 中的所有操作都是异步的，但其实这个观念是错的。RxJS 的核心特性是它的异步处理能力，但它也是可以用来处理同步的行为。...('Semlinker'); observer.next('Lolo'); setTimeout(() => { observer.next('RxJS Observable');...— Observable 可以应用于同步和异步的场合。...timer import { timer } from "rxjs"; const source$ = timer(1000, 5000); const subscribe = source$.subscribe...此外，timer 也可以只传一个参数，比如： import { timer } from "rxjs"; const source$ = timer(1000); source$.subscribe(

1.1K1 0

Rxjs光速入门0. 前言1. Observable2. 产生数据源3. Hot & Cold Observable5. 操作符6. 弹珠图7. Subject总结

of比较常用，还有其他的各种功能的产生数据源的方法如：repeat、generate、range、never、throw等（cold observable）异步数据流常用方法：interval、timer...操作符一个Observable对象代表一个数据流，对于实际应用上的一些复杂的问题，我们当然不直接subscribe数据流，而是先让它经过一系列处理再subscribe。...、无副作用那么很容易推理出来，底层实现是返回新的Observable对象，而rx世界中一切产生数据源的方法都是基于create封装，操作符返回的对象还具有subscribe方法。...因为有一个关键点，subject状态唯一而统一，被自身实例subject.complete过后，再次subject.next也是无法被subscribe了。...，多个数据流协同、合并、连接，使得整个Rxjs应用在显得流程清晰缺点： api较多，学习成本高，比较抽象代码简洁以链式操作为主，维护性不如传统的面向对象+模块化库比较庞大，简单问题需要引入一系列api

9123 0

RxJS 入门到搬砖之 Scheduler

在 JavaScript 中，setTimeout(fn, 0) 在下次事件循环迭代中最早运行函数 fn。...这在测试中特别有用，其中可以使用虚拟时间 Scheduler 来伪造现实时间，而实际上是同步执行计划任务。...可用于创建流畅的浏览器动画 # Using Schedulers 你可能已经在 RxJS 代码中使用了调度器，而没有明确说明要使用的调度器的类型。...对于返回可能大量或无限数量的消息的 operator ，RxJS 会使用 queueScheduler。对于使用计时器的 operator , RxJS 会使用 asyncScheduler。...fromPromise interval merge of range throw timer 使用 subscribeOn 来调度 subscribe() 调用将来在什么上下文中发生。

4711 0

Rxjs光速入门

，还有其他的各种功能的产生数据源的方法如：repeat、generate、range、never、throw等（cold observable）异步数据流常用方法：interval、timer、fromPromise...操作符一个Observable对象代表一个数据流，对于实际应用上的一些复杂的问题，我们当然不直接subscribe数据流，而是先让它经过一系列处理再subscribe。...this、返回同类实例函数式编程：纯函数、无副作用那么很容易推理出来，底层实现是返回新的Observable对象，而rx世界中一切产生数据源的方法都是基于create封装，操作符返回的对象还具有subscribe...因为有一个关键点，subject状态唯一而统一，被自身实例subject.complete过后，再次subject.next也是无法被subscribe了。...，多个数据流协同、合并、连接，使得整个Rxjs应用在显得流程清晰缺点： api较多，学习成本高，比较抽象代码简洁以链式操作为主，维护性不如传统的面向对象+模块化库比较庞大，简单问题需要引入一系列api

6062 0

如何使用 RxJS 更优雅地进行定时请求

实际的业务场景是这样的：前端需要轮循请求后端接口获取文件处理进度，并在前端用进度条展示。如下方所示： ? 首先想到的肯定是使用 setTimeout 或者 setInterval 进行定时请求。...我在之前的工作中还没有遇到过这类需求，所以我并不是很清楚如果用传统方式应该如何解决。然而很庆幸的是 RxJS 正好擅长处理这样的问题。...我立即翻了一下文档，interval 操作符可以处理定时任务，而且更强大的是返回结果也是有顺序的。...// 间隔 1s 请求 this.timer$ = interval(1000) .pipe( // 取消过时的请求值 switchMap(() => {...最终的效果很完美。总结 RxJS 确实是一个非常强大的工具库，尤其处理异步交互真的是省时省力，但是国内技术文章偏少，遇到疑难问题还需要查阅国外文章。欢迎大家评论交流。

2.2K4 0

RxJS速成

准备项目我使用typescript来介绍rxjs. 因为我主要是在angular项目里面用ts....Observable对象, 因为Rx里面很多的功能都用不上. import 'rxjs/add/observable/from'; // 这里我需要使用from 操纵符(operator) let persons...例如 filter: filter就是按条件过滤, 只让合格的元素通过. 例 debounceTime (恢复时间): 如果该元素后10毫秒内, 没有出现其它元素, 那么该元素就可以通过...., 而订阅者2只处理input事件....例子: import { Observable } from "rxjs/Observable"; import 'rxjs/add/observable/timer'; import 'rxjs/

4.2K18 0

Rxjs光速入门

，还有其他的各种功能的产生数据源的方法如：repeat、generate、range、never、throw等（cold observable）异步数据流常用方法：interval、timer、fromPromise...操作符一个Observable对象代表一个数据流，对于实际应用上的一些复杂的问题，我们当然不直接subscribe数据流，而是先让它经过一系列处理再subscribe。...this、返回同类实例函数式编程：纯函数、无副作用那么很容易推理出来，底层实现是返回新的Observable对象，而rx世界中一切产生数据源的方法都是基于create封装，操作符返回的对象还具有subscribe...因为有一个关键点，subject状态唯一而统一，被自身实例subject.complete过后，再次subject.next也是无法被subscribe了。...，多个数据流协同、合并、连接，使得整个Rxjs应用在显得流程清晰缺点： api较多，学习成本高，比较抽象代码简洁以链式操作为主，维护性不如传统的面向对象+模块化库比较庞大，简单问题需要引入一系列api

5822 0

5 分钟温故知新 RxJS 【转换操作符】

这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。 ---- RxJS 转换操作符，继续冲冲冲！...= example.subscribe(val => console.log(val)); map map 最关键了，它能对源 observable 的每个值应用投射函数。...v6+ import { timer, interval } from 'rxjs'; import { window, scan, mergeAll } from 'rxjs/operators';...【附 RxJS 实战】 为什么说：被观察者是 push 数据，迭代者是 pull 数据？探秘 RxJS Observable 为什么要长成这个样子？！...Js 异步处理演进，Callback=>Promise=>Observer 继续解惑，异步处理 —— RxJS Observable 我是掘金安东尼，输出暴露输入，技术洞见生活，再会~

5901 0

竞态问题与RxJs

，如果网络完全没有波动的情况下，我们就可以正常按照顺序得到B、C的弹窗，但是如果网络波动了呢，假设由于返回B的数据包正常在路上阻塞了，而C先返回来了，那么最后得到的执行顺序可能就是C、B的弹窗了。...为什么说尽量呢，因为如果用户中间停顿了300ms也就是下边设置的值之后，再进行输入的话，依旧无法确保解决网络的原因造成的竞态问题，如果你把这个延时设置的非常大的话，那么就会造成用户最少等待n ms才能响应...; return (...args) => { clearTimeout(timer); timer = null; timer = setTimeout...这样看起来是完全解决了竞态的问题，但是似乎看起来并不是非常的漂亮，追求完美的同学可能会眉头一皱，觉得事情并不简单，这一段代码的执行结果依赖两个异步逻辑的彼此的执行顺序，而需要我们编写其他的代码去控制这个执行顺序...RxJs RxJs是Reactive Extensions for JavaScript的缩写，起源于Reactive Extensions，是一个基于可观测数据流Stream结合观察者模式和迭代器模式的一种异步编程的应用库

1.1K3 0

RxJs简介

; 纯净性 (Purity) 使得RxJS变得如此强大的原因是它使用了纯函数，这意味着你的代码很少会发生错误。正常情况下，你不会选择创建一个纯函数。...- RxJS Subject 是一种特殊类型的 Observable，它允许将值多播给多个观察者，所以 Subject 是多播的，而普通的 Observables 是单播的(每个已订阅的观察者都拥有 Observable...调度器可以让你规定 Observable 在什么样的执行上下文中发送通知给它的观察者。...这也解释了为什么发送给 finalObserver 的 got value 1 发生在 just after subscribe 之后。...举例来说，from(array, scheduler) 可以让你指定调度器，当发送从 array 转换的每个通知的时候使用。调度器通常作为操作符的最后一个参数。

3.6K1 0

RxJS & React-Observables 硬核入门指南

Observable发出的所有值都将被推送到Subject，而Subject将把接收到的值广播给所有的observer。...next: value => console.log(value) }); /* Output 1 2 3 4 5 */ 操作符操作符使RxJS变得有用。...在Epic内部，我们可以使用任何RxJS的可观察模式，这就是为什么redux-observable很有用。例如:我们可以使用.filter操作符创建一个新的中间可观察对象。...总结如果你正在开发一个包含如此复杂的用例的Redux应用程序，强烈推荐使用Redux-observables。毕竟，使用它的好处直接与应用程序的复杂性成正比，这从上面提到的实际用例中是显而易见的。...我坚信使用正确的库集将帮助我们开发更干净和可维护的应用程序，并且从长远来看，使用它们的好处将超过缺点。

6.8K5 0

RxJS Subject

观察者模式观察者模式，它定义了一种一对多的关系，让多个观察者对象同时监听某一个主题对象，这个主题对象的状态发生变化时就会通知所有的观察者对象，使得它们能够自动更新自己。...我们已经知道了观察者模式定义了一对多的关系，我们可以让多个观察者对象同时监听同一个主题，这里就是我们的时间序列流。当数据源发出新值的时，所有的观察者就能接收到新的值。...(); setTimeout(() => { subject.subscribe(observerB); // 1秒后订阅 }, 1000); 最后我们来介绍一下在 Angular 项目中，RxJS...Subject 的应用。...Angular RxJS Subject 应用在 Angular 中，我们可以利用 RxJS Subject 来实现组件间通信，具体示例如下： message.service.ts import {

2K3 1

深入浅出 RxJS 之合并数据流

/Observable'; import 'rxjs/add/observable/timer'; import 'rxjs/add/operator/map'; import 'rxjs/add/observable...merge 的应用场景 const click$ = Rx.Observable.fromEvent(element, 'click'); const touchend$ = Rx.Observable.fromEvent...数据积压问题如果某个上游 source1$ 吐出数据的速度很快，而另一个上游 source2$ 吐出数据的速度很慢，那 zip 就不得不先存储 source1$ 吐出的数据，因为 RxJS 的工作方式是...Observable 对象就是胜者， race 产生的 Observable 就会完全采用胜者 Observable 对象的数据，其余的输入 Observable 对象则会被退订而抛弃。...# startWith startWith 只有实例操作符的形式，其功能是让一个 Observable 对象在被订阅的时候，总是先吐出指定的若干个数据。

1.6K1 0

RxJS在快应用中使用

响应式编程在各个编程语言中都有对应的实现，应用较为广泛的是 RxJava 以及 RxJS。...上面的描述可能比较抽象，举一个类比现实生活的例子来帮助理解这几个概念：购房者一直在密切的关注房价，而房价随时间波动，购房者可能会根据波动的房价而采取一系列的行动，比如购入或者继续观望。...房价即为 Observable 对象；购房者即为 Observer 对象；而购房者观察房价即为 Subscribe（订阅）关系；如果理解了这个场景，那么就大概理解了 RxJS 的基础概念，如果你没接触过需要更详细了解...请求超时通常，我们处理请求超时会采用 setTimeout 的方式来实现，这里我们来试试如何用 RxJS 的方式来封装一个支持超时机制的请求接口。...技术总结 RxJS 作为一个擅长处理事件的库，函数式编程使得代码更加优雅，在需要处理多个事件并发的时候，能够显现出其强大的优势，本文中只使用了少部分的操作符，就能将繁琐的操作变得更加简洁。

1.8K0 0

Angular 自定义服务 notification

这是我参与「掘金日新计划 · 4 月更文挑战」的第4天，之前的一篇文章了解 Angular 开发的内容，我们有提到： service 不仅可以用来处理 API 请求，还有其他的用处比如，我们这篇文章要讲到的...import { Injectable } from '@angular/core'; import { Observable, Subject } from 'rxjs'; // 通知状态的枚举...rxjs import { Subscription } from 'rxjs'; import {debounceTime} from 'rxjs/operators'; // 引入相关的服务 import...this.resetTimeout(); this.timer = setTimeout(() => { this.notificationCssClass...这个知识点，RxJS 是使用 Observables 的响应式编程的库，它使编写异步或基于回调的代码更容易。

4863 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭