Javascript beobachtbare Leistungsproblem

Question

Aktuelle Arbeits-Code

Ich habe folgendes rxjs/Observable:

findMessages(chatItem: any): Observable<any[]> { 
    return Observable.create((observer) => { 
     let processing: boolean = false; 
     this.firebaseDataService.findMessages(chatItem).forEach(firebaseItems => { 
      if (!processing) { 
       processing = true; 
       this.localDataService.findMessages(chatItem).then((localItems: any[]) => { 
        let mergedItems: any[] = this.arrayUnique(firebaseItems.concat(localItems), false); 
        mergedItems.sort((a, b) => { 
         return parseFloat(a.negativtimestamp) - parseFloat(b.negativtimestamp); 
        }); 
        if (this.me && mergedItems && mergedItems[0] && this.me.uid === mergedItems[0].memberId2) { 
         this.updateChatWithMessage(chatItem, mergedItems[0], false); 
        } 
        observer.next(mergedItems); 
        processing = false; 
       }); 
      } 
     }); 
    }); 
} 

und

this.firelist = this.dataService.findMessages(this.chatItem); 
this.firelist.subscribe(items => { 
    ... 
}); 

Wie Sie sehen können, ist es eine Liste von firebaseItems zurückgibt und localItems , die zu mergedItems zusammengeführt werden. Das funktioniert perfekt.

Performance Enhancement

aber ich versuche, um die Leistung, die die Elemente Last zu erhöhen. Also Figur, ich möchte zuerst die localItems laden, und dann mit der firebaseItems zur Liste hinzufügen.

Also versuche ich, die folgende Funktion:

findLocalMessages(chatItem: any): Observable<any[]> { 
    return Observable.create((observer) => { 
     this.localDataService.findMessages(chatItem).then((localItems: any[]) => { 
      localItems.sort((a, b) => { 
       return parseFloat(a.negativtimestamp) - parseFloat(b.negativtimestamp); 
      }); 
      observer.next(localItems); 
     }); 
    }); 
} 

und es nennen wie folgt:

this.firelist = this.dataService.findLocalMessages(this.chatItem); 
this.firelist = this.dataService.findMessages(this.chatItem); 
this.firelist.subscribe(items => { 
    ... 
}); 

Problem

Dies hat jetzt einen Fehler eingeführt, dass es jetzt 2 Observables und die Ergebnisse sind nicht wie erwartet. Die Sortierreihenfolge ist falsch, und einige der Elemente werden aus irgendeinem Grund nicht zur this.firelist hinzugefügt.

Frage

Was ist der beste Weg, dies zu umgehen?

Ich denke mich, ob es möglich ist, die findLocalMessagesObservable nur um einmal gefeuert, und es funktioniert dann nie wieder, da die findMessagesObservable die Liste beibehalten wird. Ist das möglich? Ich habe auf die Observable API geschaut, und kann nicht scheinen, wie man das macht.

Jede Hilfe wird geschätzt.

Answer 1

Mit dem Risiko, die Problembeschreibung zu stark zu vereinfachen, haben Sie zwei Datenströme, die Sie effizient zusammenführen und sortieren möchten.

Die Trennung, die Sie vorgenommen haben, ist ein Schritt in die richtige Richtung. Der Grund, warum Sie nicht alle Nachrichten erhalten, besteht darin, dass Sie das erste Observable mit dem zweiten überschreiben. Sehen Sie sich das folgende Beispiel an und sehen Sie, was passiert, wenn Sie versuchen, das zweite Observable zu verschieben anstelle von move2.

let move = Observable.fromEvent(document.getElementById("1"), 'mousemove'); 
 
let move2 = Observable.fromEvent(document.getElementById("2"), 'mousemove'); 
 
     move 
 
      .subscribe((event:any) => { 
 
       if (event) { 
 
       console.log(event.path[0].id) 
 
       } 
 
      }); 
 

 
      move2 
 
      .subscribe((event:any) => { 
 
       if (event) { 
 
       console.log(event.path[0].id) 
 
       } 
 
      });

<h1> 
 
    <div id="1"> 
 
    aaaaaaaaaaaaaaaaaaaaaaaaa 
 
    </div> 
 

 
    <div id="2"> 
 
    bbbbbbbbbbbbbbbbbbbbbbbbb 
 
    </div> 
 
</h1>

Um die beiden Ströme miteinander verschmelzen richtig benötigen Sie den merge operator verwenden, wie unten dargestellt:

let move = Observable.fromEvent(document.getElementById("1"), 'mousemove'); 
 
let move2 = Observable.fromEvent(document.getElementById("2"), 'mousemove'); 
 
     move.merge(move2) 
 
      .subscribe((event:any) => { 
 
       if (event) { 
 
       console.log(event.path[0].id) 
 
       } 
 
      });

alles, was Sie jetzt brauchen, um Tun Sie sie. Ich würde empfehlen, dass Sie die Sortierung erst nach der Zusammenführung vornehmen, da Sie andernfalls zwei Ströme erhalten, die lokal und nicht global sortiert sind.