debounceTime使用Rxjs调用API调用

问题描述：

我想了解rxjs并陷于debounceTime(n /* ms */)实验中。debounceTime使用Rxjs调用API调用

公共debounceTime（duetime参数：编号，调度程序：调度程序）：可观察

发射来自源仅在特定时间跨度而不另一个源发射通过后可观察到的值。

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

答

作为每文档，debounceTime（n）被假设丢弃以前未决的延迟排放如果新的值到达的源上。

这是真的，但每次点击：

创建新的订阅
它调用API
API返回结果
debounceTime等待10秒（什么都不会发生，因为fakeObserver发出返回observerable只有一次）
您记录结果

您需要在点击转换可观察到实现你想要什么：

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

检查jsBin

我不与第4点清楚，我观察到的是，它（我的代码）表现完全像延迟（n）。是否因为如果'.subscribe'调用是通过可观察的，它将被视为新订阅？所以如果我有观察者观察API调用值，我是否能够得到相同的结果？ –

@Amresh Venugopal，请改述，我不明白 –

如果.subscribe调用一次给观察者，那么按照我的预期，只有在每N次点击n次的情况下，debounce（n）才会工作一次？ –

debounceTime使用Rxjs调用API调用

相关推荐