- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在寻找一个 RxJS 运算符(或运算符的组合),它可以让我实现这一点:
import { Component, OnInit } from "@angular/core";
import { Subject } from "rxjs";
import { delay } from "rxjs/operators";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
counter = 1;
displayedValue = 1;
valueEmitter = new Subject<number>();
valueEmitted$ = this.valueEmitter.asObservable();
ngOnInit() {
// I want to allow each incremented value to be displayed for at least 2 seconds
this.valueEmitted$.pipe(delay(2000)).subscribe((value) => {
this.displayedValue = value;
});
}
onClick() {
const nextCounter = ++this.counter;
this.counter = nextCounter;
this.valueEmitter.next(nextCounter);
}
}
在本例中,我希望
counter
中的每个值都增加。显示为
displayedValue
至少 2 秒。
onClick
显示的值应该立即从 1 变为 2,但如果用户继续快速增加
counter
displyedValue
应该以延迟的方式跟随,允许每个先前增加的数字在更改之前显示 2 秒,慢慢 catch 当前的计数器值。
import { Component, OnInit } from "@angular/core";
import { Subject } from "rxjs";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
styleUrls: ["./app.component.css"]
})
export class AppComponent implements OnInit {
counter = 1;
displayedValue = 1;
currentDisplayedValueStartTime = 0;
readonly DISPLAY_DURATION = 2000;
valuesToDisplay = [];
displayedValueSwitcherInterval: number | null = null;
valueEmitter = new Subject<number>();
valueEmitted$ = this.valueEmitter.asObservable();
ngOnInit() {
this.valueEmitted$.pipe().subscribe((value) => {
this.handleValueDisplay(value);
});
}
onClick() {
const nextCounter = ++this.counter;
this.counter = nextCounter;
this.valueEmitter.next(nextCounter);
}
handleValueDisplay(value) {
this.valuesToDisplay.push(value);
if (!this.displayedValueSwitcherInterval) {
this.displayedValue = this.valuesToDisplay.shift();
this.displayedValueSwitcherInterval = window.setInterval(() => {
const nextDiplayedValue = this.valuesToDisplay.shift();
if (nextDiplayedValue) {
this.displayedValue = nextDiplayedValue;
} else {
clearInterval(this.displayedValueSwitcherInterval);
this.displayedValueSwitcherInterval = null;
}
}, this.DISPLAY_DURATION);
}
}
}
这不是我想要的,因为它依赖于组件状态和
setInterval
为了管理通知队列。我希望找到一些更干净、更具声明性的东西,它依赖于 RxJs 操作符来处理我的通知流和它们的间隔队列——但至少我让这个功能完全按照我的意愿工作。仍然愿意接受有关如何使其变得更好的建议。
最佳答案
我认为这可能是解决它的一种方法:
this.valueEmitted$
.pipe(
concatMap(
(v) => concat(
of(v),
timer(2000).pipe(ignoreElements())
)
)
)
.subscribe((value) => {
this.displayedValue = value;
});
因为
timer
也会发出一些值(0、1、2 等等),我们使用
ignoreElements
因为我们对这些值和我们想要的
timer
不感兴趣是
完成通知这将指示可以订阅下一个内部 observable 的时刻。请注意,前面提到的内部 observable 是通过调用
concatMap
创建的。的回调函数与
v
作为论据。
Every event fired by the observable should be handled by the order it was triggered (no skipping, throttling, debouncing any of the values).
concatMap
的帮助下得到保证.
I should be able to define a set interval between the handling of 2 subsequent events.
concat(
// First, we send the value.
of(v),
// Then we set up a timer so that in case a new notification is emitted, it will have to
// wait for the timer to end.
timer(2000).pipe(ignoreElements())
)
In case no previous events are currently handled, the next event should be handled immediately (no delay).
concatMap
没有创建事件的内部 observables , 那么值
v
将立即发送给消费者。
this.valueEmitted$
.pipe(
concatMap(
(v) => timer(2000).pipe(
ignoreElements(), startWith(v)
)
)
)
.subscribe((value) => {
this.displayedValue = value;
});
关于javascript - RxJS Operator 延迟处理后续事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68414582/
@ 。 目录 集成Flink 编程示例 打包运行 CDC入湖 概述
当我通过多个模式匹配发送一个变量时,这样做的命名约定是什么? val somethingBetweenOriginalAndResult = original match { case ...
this post 的后续工作:(根据评论中的要求进行更新) 我从实际(伪装的)示例数据以及在该数据上运行脚本的结果开始。 原始数据样本: 目录中前两个文件的标题和前两行。它们是相同的数据,这不是错误
当我通过多个模式匹配发送一个变量时,这样做的命名约定是什么? val somethingBetweenOriginalAndResult = original match { case ...
this post 的后续工作:(根据评论中的要求进行更新) 我从实际(伪装的)示例数据以及在该数据上运行脚本的结果开始。 原始数据样本: 目录中前两个文件的标题和前两行。它们是相同的数据,这不是错误
我just asked a very similar question here两个答案都有效。但是,当我在每个字典中有 > 2 个字典键时,第 3 个键的值始终为 0。例如: myList = [{
此问题是 Trapping Frame Entrance in tkinter 的后续问题其中@jasonharper 提供了非常有用的答案。 在下面的代码中,我将入口绑定(bind)到 Canvas
使用 subsequent from 子句和query continuation 有什么区别? 后面的 from 子句是指使用 ...from...in...from...in...select 模式
我的原题可以查到here ,为此我得到了一些很好的答案、idas 和提示。 作为可行性和性能研究的一部分,我已经开始转换我的模式,以便使用这些想法对我的数据进行版本控制。在这样做的过程中,我想出了一些
圆 A 沿 x 轴向右移动。圆 B 沿 y 轴向上移动。我想知道他们是否会发生碰撞。 (不是何时,只是如果。) 半径相同,恒速度不同。 This answer似乎解决了这个问题,我的问题最好应该是这个
在需要定期轮询服务器的 AJAX 应用程序(如聊天应用程序)中,建议两次调用之间的最短时间是多少,以便尽快完成更新?什么时间被认为是服务器和客户端的 hogs? 最佳答案 这个问题的答案很大程度上取决
这是 a previous question on Stack Overflow 的后续行动(参见引用链接)。考虑以下代码(来自 W3Schools): /* unvisited link */ a:
昨天,我问了a question关于如何在 .NET 中动态呈现某些内容:具体来说,我询问了如何创建用于“绘图”/渲染的白色“ Canvas ”,使用什么框架等。但是,许多答案建议我问更具体的答案,所
这是上一个问题的后续: Java compiler fails to recognise static inner class accepted answer给出了一个解决方法,如果找不到更好的解决方
这个问题跟在问题之后:How to read two lines from a file and create dynamics keys in a for-loop? 但是,问题的性质已经发展到我想
好的跟进 this thread ,这就是我想出的…… public class SharweAuthorizeAttribute : AuthorizeAttribute { private
Using nested loops 我仍在努力实现上述问题中所述的相同目标。基本上我的代码现在看起来像这样: for(int ac = 0; ac < gravityObject.length; a
一直在寻找这个没有结果。我有一个片段,我想将文本文件读入 python 中的变量中,以便稍后可以引用它(特别是杀死正在运行的进程)。 文件生成如下: os.system('wmic process w
我创建了 2 个自定义跟进 Intent ,对于这 2 个自定义跟进 Intent ,还有 3 个跟进 Intent 。一切安好。我从这 2 个阶段获取信息,然后显示结果。该过程大约是 2 个后续问题
这个问题在这里已经有了答案: Iterate through parameters skipping the first (5 个答案) 关闭 5 年前。 我有一个脚本,它的第一个参数是一个对象的标
我是一名优秀的程序员,十分优秀!