使用Rxjs通过API调用debounceTime（）

Question

我试图了解rxjs并陷入debounceTime debounceTime(n /* ms */)实验。

公共debounceTime（dueTime：数字，调度程序：调度程序）：可观察

仅在经过特定时间间隔后才发出源Observable的值，而不会发出其他源信号。

资源

我的代码：

function fakeAPI() {
    return new Rx.Observable(observer => {

    const root = 'https://jsonplaceholder.typicode.com'

    $.ajax({
      url: root + '/posts/1',
      method: 'GET'
    }).then(function(data) {
      observer.next(data)
    }).fail(function(err) {
      observer.error(err)
    })

    return ()=>{
      observer.complete()
      console.log('unsubscribed!')
    }
  })
}

const fakeObserver = fakeAPI()

$('#buttonText').click(()=>{

   fakeObserver
     .debounceTime(10000)
     .subscribe(() => {
        return {
          next(item) {
             console.log('received: ', item.id)
          },
          error(err) {
             console.log('error:', err)
          },
          complete() {
             console.log('completed!')
          }
       }
   }());  
})

我的期望：即使在给定的时间内有N次点击，API调用也只会进行一次。 相反，似乎它等待了给定的时间，然后所有N次点击都导致API调用。

我究竟做错了什么？

根据文档，如果有新值到达源，则debounceTime（n）应该丢弃先前的未决延迟发射。

这是一个JSBin链接

Answer 1

根据文档，如果有新值到达源，则debounceTime（n）应该丢弃先前的未决延迟发射。

的确如此，但是每次点击：

1. 您创建新的订阅
2. 它调用api
3. api返回结果
4. debounceTime等待10S（什么都不会发生，因为observerable由归国fakeObserver发射只有一次）
5. 您记录结果

您需要将点击转化为可观察的，以实现所需的功能：

Rx.Observable.fromEvent(document.getElementById('buttonText'), 'click')

检查jsBin