Question

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

public debounceTime（dueTime：number，scheduler：Scheduler）：Observable

仅在经过特定时间跨度而没有其他源发射后才从源Observable发出值。

source

我的代码：

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 link

Answer 1

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

但每次点击都是如此：

您创建新订阅
它叫api
Api返回结果
debounceTime等待10秒（没有任何反应，因为observerable返回的fakeObserver仅发出一次）
您记录结果

您需要在observable中转换点击次数以实现您想要的效果：

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

检查jsBin

使用Rxjs的API调用的debounceTime（）

1 个答案: