在javascript

Question

我们有一个基于事件监听器的加载器。这是通过pouchdb。

因此，每次向客户端收到文档时，侦听器都会触发。我们检查该文档是否与加载器相关，然后在另一个异步回调之后更新UI全局变量中的百分比。

现在问题是

1. 从服务器收到响应，并将侦听器添加到事件队列
2. 从服务器收到另一个响应，并将侦听器添加到事件队列
3. 为第一个事件队列元素
调用eventListener方法
4. 将doAsyncCallbackithVerification添加到事件队列
5. 为第二个事件队列元素
调用eventListener方法
6. 将doAsyncCallbackithVerification添加到事件队列
7. 调用doAsyncCallbackithVerification方法，百分比更新为85
8. 调用doAsyncCallbackithVerification方法，百分比再次更新为85

当我们预期百分比为90时（因为方法调用次数为2和2 * 5）

var percentage = 80;
function eventListener() {
  if(loaderRelated){
    doAsyncCallbackithVerification(percentage, function(newPercentage){
      percentage = newPercentage;
    });
  }
}

db.listenForTheEvents(eventListener);

处理这个问题的正常标准是什么，记住我上面写的是基于更复杂案例的javascript伪代码。我们也使用RxJ，因此可以用来缓解这些情况，如果是这样的话。

Answer 1

由于你只提供伪代码，很难给出一个精确的答案，但这是关于我如何用RxJS做的：

const listenToDb = Observable.fromCallback(db.listenForTheEvents);  // in RxJS5 it's 'bindCallback'
const asyncCbWithVerif = Observable.fromCallback(db.doAsyncCallbackWithVerification);  // in RxJS5 it's 'bindCallback'

const fetchPercentage$ = listenToDb()
    .filter(event => isLoaderRelated(event))      // don't propagate any unrelated events
    .switchMap(event => asyncCbWithVerif(event))  // if some new event arrives, the switchMap will automatically cancel the last call of 'asyncCbWithVerif'
    .do(newPercentage => console.log(newPercentage));

fetchPercentage$.subscribe(); // or however you wish to activate the stream, maybe publish & share, maybe replay, ect...

Answer 2

我只需将事件处理程序传递一个百分比即可添加到已完成的总计中。在伪代码中匹配您的问题：

var percentage = 80;
function eventListener() {
  if(loaderRelated){
    doAsyncCallbackithVerification(percentage, function(percentageCompleted){
      percentage += percentageCompleted;
    });
  }
}

db.listenForTheEvents(eventListener);