如何立即触发然后反跳

Question

我在输入框上具有事件keyUp的可观察绑定。

对于每个按下的键。我要console.log'立即执行操作'。

如果5秒钟内没有按键，那么我要console.log'做其他事情'

import { fromEvent } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';

const searchBox = document.getElementById('search');

const keyup$ = fromEvent(searchBox, 'keyup')

keyup$.pipe(
  switchMap((i: any) => 'doSomethingNow'), // I use switchMap here because 'doSomethingNow' is an http request in my real code so that on each key pressed, it cancels the previous http request if it was not finished and start the new http request
  debounceTime(2000),
  map(_ => 'do something else')
)
.subscribe(console.log);

此代码仅在5秒钟后打印'去抖后执行某些操作，但在每次按下键后都不会打印'domethingNow'

Answer 1

您是否尝试过类似的内容：

import { fromEvent } from 'rxjs';
import { debounceTime, map, switchMap } from 'rxjs/operators';

var searchBox  = document.getElementById('search');

var keyup$ = fromEvent(searchBox , 'keyup')      

keyup$.pipe(
  switchMap((i: any) => { console.log('do something');})
  debounceTime(5000)) // with delay of 5 secs
  .subscribe(console.log('do something else'););

Answer 2

您可以使用合并运算符：

const searchBox = document.getElementById('search');

const keyup$ = fromEvent(searchBox, 'keyup');

const keyupEnd$ = keyup$.pipe(
  switchMap(() => debounceTime(500))
);

const result = merge(
  keyup$,
  keyupEnd$
);