如何在 Rxjs angular 中设置轮询间隔之间的自定义间隔?
How to put custom gap between interval for polling in Rxjs angular?
我想在每次间隔调用之间实现间隙/延迟,
我在下面尝试过,但似乎不起作用。
pollOnInterval(threshold = 4000): Observable<any> {
let thresholdValue = threshold;
const increaseBy = 2000;
const maxCount = 10;
return interval(thresholdValue).pipe(take(maxCount)).pipe(delay(increaseBy)).pipe(map(() => {
thresholdValue = thresholdValue + increaseBy;
console.log((new Date).toLocaleTimeString());
}));
}
输出
2:34:21下午
2:34:25下午
2:34:29下午
2:34:33 下午
2:34:37 下午
2:34:41下午
2:34:45下午
2:34:49下午
2:34:53下午
2:34:57下午
Edit -1 debounce 和 debouceTime 都试过了,也没用,
Stackbliz link:https://stackblitz.com/edit/angular-ivy-tinm4r?file=src%2Fapp%2Fapp.component.ts
编辑 - 2 我需要以下方式
2:34:21下午
2:34:27下午
2:34:35下午
您可以在单个 pipe()
中传递所有运算符。每个操作员不需要它自己的管道。
如我的评论所述,一旦使用 thresholdValue
触发 interval()
,对 thresholdValue
变量的后续更改将不会产生任何影响在 interval()
函数上。它将继续为 thresholdValue
最初 .
表示的每个时间间隔发出
目前 Observable 正在发射 undefined
s 因为 map
.
没有返回任何东西
您需要使用 concatMap
并将延迟单独传输到每个发射。如果不是,delay
将作为一个整体通过管道传输到 interval
,如问题中所示。
尝试以下方法
var { from, of, Observable, interval } = rxjs;
var { tap, delay, take, map, concatMap } = rxjs.operators;
var displayBox = document.getElementById('display');
function pollOnInterval(threshold = 4000) {
let increaseBy = 4000; // delay for first emission from `interval`
const maxCount = 10;
return interval(4000).pipe(
concatMap(value => of(value).pipe(
tap(() =>
displayBox.innerHTML += `
Interval: ${new Date().toLocaleTimeString()};
Delay: ${increaseBy/1000}s
<br />
`
),
delay(increaseBy)
)),
tap(() => increaseBy += 2000), // <-- adjust `increaseBy`
take(maxCount),
map(() => new Date().toLocaleTimeString())
);
}
pollOnInterval().subscribe({
next: value => displayBox.innerHTML += `Subscription: ${value}<br /><hr>`,
error: null,
complete: () => displayBox.innerHTML += 'Observable complete.'
});
<script src="https://unpkg.com/rxjs@6.6.0/bundles/rxjs.umd.min.js"></script>
<p id="display"></p>
我想在每次间隔调用之间实现间隙/延迟, 我在下面尝试过,但似乎不起作用。
pollOnInterval(threshold = 4000): Observable<any> {
let thresholdValue = threshold;
const increaseBy = 2000;
const maxCount = 10;
return interval(thresholdValue).pipe(take(maxCount)).pipe(delay(increaseBy)).pipe(map(() => {
thresholdValue = thresholdValue + increaseBy;
console.log((new Date).toLocaleTimeString());
}));
}
输出
2:34:21下午
2:34:25下午
2:34:29下午
2:34:33 下午
2:34:37 下午
2:34:41下午
2:34:45下午
2:34:49下午
2:34:53下午
2:34:57下午
Edit -1 debounce 和 debouceTime 都试过了,也没用, Stackbliz link:https://stackblitz.com/edit/angular-ivy-tinm4r?file=src%2Fapp%2Fapp.component.ts
编辑 - 2 我需要以下方式
2:34:21下午
2:34:27下午
2:34:35下午
您可以在单个
pipe()
中传递所有运算符。每个操作员不需要它自己的管道。如我的评论所述,一旦使用
表示的每个时间间隔发出thresholdValue
触发interval()
,对thresholdValue
变量的后续更改将不会产生任何影响在interval()
函数上。它将继续为thresholdValue
最初 .目前 Observable 正在发射
没有返回任何东西undefined
s 因为map
.您需要使用
concatMap
并将延迟单独传输到每个发射。如果不是,delay
将作为一个整体通过管道传输到interval
,如问题中所示。
尝试以下方法
var { from, of, Observable, interval } = rxjs;
var { tap, delay, take, map, concatMap } = rxjs.operators;
var displayBox = document.getElementById('display');
function pollOnInterval(threshold = 4000) {
let increaseBy = 4000; // delay for first emission from `interval`
const maxCount = 10;
return interval(4000).pipe(
concatMap(value => of(value).pipe(
tap(() =>
displayBox.innerHTML += `
Interval: ${new Date().toLocaleTimeString()};
Delay: ${increaseBy/1000}s
<br />
`
),
delay(increaseBy)
)),
tap(() => increaseBy += 2000), // <-- adjust `increaseBy`
take(maxCount),
map(() => new Date().toLocaleTimeString())
);
}
pollOnInterval().subscribe({
next: value => displayBox.innerHTML += `Subscription: ${value}<br /><hr>`,
error: null,
complete: () => displayBox.innerHTML += 'Observable complete.'
});
<script src="https://unpkg.com/rxjs@6.6.0/bundles/rxjs.umd.min.js"></script>
<p id="display"></p>