1

嗨，使用 React，我在一个组件中得到了这段代码，当外部实体名称更改时，它会进行查询。所以它来自应用程序某处的另一个输入。当它更改时，我的其他组件会更新并运行该请求。外部输入已经在 250 毫秒时去抖动，但我想对这段代码进行去抖动，以确保我不会无缘无故地向服务器发送太多请求。我在那里使用 debounceTime(5000) 来测试它，但它只是立即发生。我的服务器现在是本地的，所以得到响应非常快。我想知道我在 debounceTime 函数上做错了什么。

    const url = formField.getRequest(entity);
    const headers = Headers.getDefaultHeaders(context);
    headers.Accept = 'application/json';
    headers['Content-Type'] = 'application/json';
    ajaxObservable = ajax({
      url,
      method: 'get',
      headers,
    }).pipe(
      debounceTime(5000),
      map((response) => {
        const options = formField.parseResponse(response.response);
        doneCB(options.sort());
      }),
      catchError(() => of({})),
    );

    ajaxObservable.subscribe(() => {});```

Thanks a lot!
4

1 回答 1

2

如果您不确定输入是否被谴责：

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

const input = document.querySelector('#search');
const fakeRequest$ = of('Requested').pipe(delay(1500))

fromEvent(input, 'keydown')
.pipe(
  tap((event) => console.log('Before debounceTime', event.target.value)),
  debounceTime(500),
  tap((event) => console.log('After debounceTime', event.target.value)),
  switchMap(() => fakeRequest$),
  tap(console.log),
)
.subscribe()

堆栈闪电战

于 2020-04-16T07:16:52.080 回答