我必须合并流以获取 URL 以加载图像:一个流用于放置事件，一个流用于文件输入更改。在每条新路径上，我都会加载此图像并将其绘制到 Canvas 上。这个 Canvas 被传递到另一个流中。它看起来像这样:

// prevent browsers default behavior for dropTargetElement
[ 'drop', 'dragover' ].forEach(function(eventName) {
  Rx.Observable.fromEvent(dropTargetElement, eventName).subscribe(function(event) {
    event.preventDefault();
  });
});

// file path stream merged from openFileInputs change and openFileDropTargets drop
Rx.Observable.merge(Rx.Observable.fromEvent(inputElement, 'change').map(function(event) {
  return event.target.value;
}), Rx.Observable.fromEvent(dropTargetElement, 'drop').map(function(event) {
  return event.dataTransfer.files[0].path;
})).map(function(path) {
  var image = new Image();
  image.src = path;

  // note: I return an Observable in this map function
  // is this even good practice? if yes, is mergeAll the best
  // way to get the "load" event?
  return Rx.Observable.fromEvent(image, 'load');
}).mergeAll().map(function(event) {
  return event.path[0];
}).subscribe(function(image) {
  var canvas = document.createElement('canvas');
  var context = canvas.getContext('2d');

  canvas.width = image.width;
  canvas.height = image.height;
  context.drawImage(image, 0, 0);

  canvasState.onNext(canvas);
});

(附带问题:是否“允许”在 map 中返回 Observable？)

我的 canvasState 看起来像这样:

var canvasState = new Rx.BehaviorSubject(undefined);

// draw image
canvasState.filter(function(canvas) {
  return !!canvas;
}).subscribe(function drawImage(canvas) {
  document.body.appendChild(canvas);
});

如您所见，如果我的 Canvas 值为真，我会将 Canvas 附加到正文。但是每次出现新 Canvas 时，我都想删除旧 Canvas 。实现这一目标的最佳方法是什么？这样的事情可能吗？

// draw image
canvasState.filter(function(canvas) {
  return !!canvas;
}).beforeNext(function(oldCanvas) {
  // remove old one
}).subscribe(function drawImage(canvas) {
  document.body.appendChild(canvas);
});

最佳答案

嵌套的 Observable

是的，map 操作返回一个 Observable 是正常的。这为您提供了可观察流的可观察流。有 Rx 3 操作来展平嵌套的可观察到的一层:

• mergeAll - 订阅所有到达的内部流。您通常最终会同时订阅多个流，并且通常您的最终流会将来自不同内部流的结果混合在一起。您可以提供一个 maxConcurrent 参数来限制并发内部订阅的数量。当达到限制时，新的内部 observable 会排队，并且不会被订阅，直到之前的内部 observable 完成。
• concatAll - 按顺序一次订阅每个内部可观察流。您的结果流将以可预测的顺序生成项目。 Concat 只是将 maxConcurrent 设置为 1 的 Merge。
• switch - 订阅第一个内部流。然后，当新流到达时，“切换”到它。基本上取消订阅之前的内流，订阅最新的内流。如果您只想收听最新的内部流，请使用 switch。

(在我的代码中，我还实现了第四个扁平化运算符:concatLatest，它类似于 concat，但是当内部流完成时，而不是跳转到队列中的下一个流，它直接跳转到队列中的最新序列，丢弃任何跳过的内部流。它的行为介于 concat 和 switch 之间我发现它对于处理背压非常有用，同时还能产生结果。

因此，.map(...).mergeAll() 或 .map(...).concatAll() 或 .map(...).switch().它是如此常见，以至于有针对这 3 种情况的 Rx 方法:

• source.flatMap(selector) 等价于source.map(selector).mergeAll()
• source.concatMap(selector) 等价于source.map(selector).concatAll()
• source.flatMapLatest(selector) 等价于source.map(selector).switch()

你的代码

根据以上信息，我建议您使用switch 而不是merge。正如您现在的代码所示，如​​果有人快速更改值，您可能会同时发出 2 个图像请求，如果它们以错误的顺序完成，您最终会得到错误的最终 Canvas 。 switch 将取消陈旧的图像请求并切换到新的图像请求。

请注意，如果用户持续更改值的速度快于图像请求完成的速度，那么他们将永远看不到任何图像，因为您将不断切换到新图像。这是我通常使用 concatLatest 的地方，因为它会在尝试跟上时不时地完成一些中间请求。 YMMV.

清理旧 Canvas

当我的可观察流有一个映射操作产生必须清理的资源时，我倾向于使用 scan 因为它可以为我跟踪以前的值(我不需要去关闭)变量来保存以前的值):

canvasState
    .filter(function (c) { return !!c; })
    .scan({}, function (acc, canvas) {
        return { previous: acc.canvas, canvas: canvas };
    })
    .subscribe(function (v) {
        // remove the old canvas
        if (v.previous) { document.body.removeChild(v.previous); }

        // add the new one
        document.body.appendChild(v.canvas);
    });

关于javascript - RxJS:如何在传递下一个有效值之前进行一些清理？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28263734/