Bei asynchronen Ereignissen in JavaScript den Status beibehalten

Question

Wir haben einen Loader, der auf einem Ereignis-Listener basiert. Dies ist durch pouchdb.

Jedes Mal, wenn ein Dokument an den Client gesendet wird, wird der Listener ausgelöst. Wir prüfen, ob das Dokument mit dem Loader verbunden ist, und aktualisieren dann nach einem anderen asynchronen Callback den Prozentsatz in einer globalen Variablen der Benutzeroberfläche.

Das Problem ist jetzt

1. eine Antwort von dem Server empfangen wird, und der Hörer wird an die Ereigniswarteschlange hinzugefügt
2. Eine andere Antwort von dem Server empfangen wird und der Hörer wird an die Ereigniswarteschlange hinzugefügt
3. die eventlistener Methode wird für das erste Ereignis Warteschlangenelement genannt
4. die doAsyncCallbackithVerification
an die Ereigniswarteschlange hinzugefügt wird
5. die Methode ist eventlistener Aufruf ed für das Element zweite Ereigniswarteschlange
6. Die doAsyncCallbackithVerification wird
7. Die doAsyncCallbackithVerification Verfahren und der Prozentsatz auf 85
8. Die doAsyncCallbackithVerification Methode wird und der Prozentsatz wird
bis 85 wieder aktualisiert genannt aktualisiert wird aufgerufen, um die Ereigniswarteschlange hinzugefügt

Wann würden wir den Prozentsatz erwarten 90 zu sein (da Anzahl der Anrufzeiten Methode 2 und 2 * 5)

---

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

db.listenForTheEvents(eventListener); 

Was ist der normale Standard, um dies zu handhaben, unter Berücksichtigung, was ich oben geschrieben habe, war Javascript Pseudocode basierend auf einem viel komplexeren Fall dann. Wir verwenden auch RxJs, also könnte das verwendet werden, um diese Szenarien abzuschwächen und wenn ja wie.

Answer 1

Da Sie nur Pseudo-Code provdided, ist es schwierig, eine genaue Antwort zu geben, aber das ist, wie ich es mit RxJS tun würde:

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

Ich würde einfach die Event-Handler einen Prozentsatz passieren zu füge zur abgeschlossenen Summe hinzu. In Pseudocode zu Ihrer Frage:

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

db.listenForTheEvents(eventListener);