RxJS: programmable

Question

Je suis en train d'insérer un retard de temps variable entre les éléments du tableau à l'aide Observables. Dans cet exemple, je veux déplacer une icône de lapin horizontalement sur l'écran. Comme une course de pistolet à eau à une arcade. Voici mon tableau d'entrée

var inputArray = [ 
     {locationX: 100, timeDelay: 2000}, 
     {locationX: 500, timeDelay: 8000}, 
     {locationX: 700, timeDelay: 3000} 
    ] 

Dans cet exemple, le lapin se déplacerait à l'emplacement 100px au bout de 2 secondes, puis à l'emplacement 500px après un délai de 8 secondes, etc ....

var obs = Rx.Observable.from(inputArray) 
     .flatMap(x => return Rx.Observable.timer(x.timeDelay)) 

ci-dessus le code ne fonctionne pas. Je boucle juste à travers le tableau sans délai. Des idées?

Answer 1

Voici un exemple pratique, vous devez éliminer l'instruction return, et ajouter un sélecteur de résultat [function] à flatMap, il va parcourir chaque élément et le passer à votre abonnement. Ici vous avez l'exemple de travail http://jsbin.com/jutizataji/edit?js,console,output

var inputArray = [ 
 
     {locationX: 100, timeDelay: 500}, 
 
     {locationX: 500, timeDelay: 1000}, 
 
     {locationX: 700, timeDelay: 5000} 
 
    ] 
 

 
Rx.Observable 
 
    .from(inputArray) 
 
    .flatMap(x => Rx.Observable.timer(x.timeDelay), (x) => x) 
 

 
    // here x represent each object inside your input array, to access location do x.locationX 
 
    .subscribe((x) => { console.log(x); });

Answer 2

Vous étiez très proche. flatMap s'exécutera pour chaque émission dès qu'elle sera disponible (comportement .merge). En utilisant .concatMap il traitera l'émission en cours avant de commencer la suivante:

var inputArray = [ 
 
      {locationX: 100, timeDelay: 500}, 
 
      {locationX: 500, timeDelay: 1000}, 
 
      {locationX: 700, timeDelay: 5000} 
 
     ] 
 
    
 
    Rx.Observable 
 
     .from(inputArray) 
 
     .concatMap(i => Rx.Observable.just(i).delay(i.timeDelay)) 
 
     .subscribe(console.log);

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/4.1.0/rx.all.js"></script>

Il est préférable de ne pas avoir n minuteries en cours d'exécution selon la réponse de Miguel Lattuada parce que cela pourrait vous donner des problèmes de mémoire.