观察者退订后，可观察到的值是否继续发射？

Question

让我们考虑下面的示例代码：

gude() {
  const digestor$ = new Observable(subscriber => {
    for (let i = 0; i < 4711; i++) {
      setTimeout(() => {
        const hash = createHashWithNLeadingZeroes(i);
        subscriber.next(hash);
      }, i);
    }
  });

  const subscription = digestor$.subscribe(
    _ => {
      if (subscription) {
        subscription.unsubscribe();
      }
    }
  );
}

在函数gude（）中，将创建一个新的observable，它将发出哈希值，该哈希值的前n个前导值设置为零。一个观察者订阅了那个可观察的，并立即取消订阅。让我们假设函数createHashWithNLeadingZeroes（）需要相当长的时间来生成响应。

我想这里发生了以下事情：

（1） 创建了一个新的可观察对象，描述可观察对象行为的函数被内部存储在属性_subscribe中(https://github.com/ReactiveX/rxjs/blob/master/src/internal/Observable.ts: 37-41).

（2） 调用subscribe（）时，首先将观察者包装在Subscriber对象中，然后将该Subscriber应用于保存观察者逻辑的_subscribe函数_subscribe（）返回速度很快，因为只设置了4711个超时，并且返回了订阅对象(https://github.com/ReactiveX/rxjs/blob/master/src/internal/Observable.ts: 206-250).

订阅服务器基本上拦截对下一步（）、错误（）和完成（）的调用，并且仅在内部未设置属性isStopted时转发给实际观察者（https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subscriber.ts： 90-128）。

（3） 一旦设置了变量subscription，就会调用unsubscripte（）。除其他外，这将导致将isStopped设置为true，以便订阅者不再将哈希转发给观察者(https://github.com/ReactiveX/rxjs/blob/master/src/internal/Subscriber.ts: 130-136).

然而，根据这一逻辑，可观察者仍将继续工作，直到所有4711个散列都被毫无目的地计算出来，因为观察者的方法变成了noop。最终，这种行为会影响应用程序的性能，这取决于订阅量和可观察对象的工作负载。我发现很难相信所描述的是正确的。我在这里遗漏了哪一部分？

Answer 1

我在这里遗漏了哪一部分？

我认为你缺少的部分是，尊重契约是被观察者的责任：如果它被要求停止发射，它应该停止发射。因此，您的可观察对象应执行以下操作：

const digestor$ = new Observable(subscriber => {
  let keepGoing = true;
  for (let i = 0; i < 4711 && keepGoing; i++) {
    setTimeout(() => {
      if (keepGoing) {
        const hash = createHashWithNLeadingZeroes(i);
        subscriber.next(hash);
      }
    }, i);

    return () => keepGoing = false; // this function is called when the subscriber unsubscribes
  }
});

依靠现有的工厂功能和操作员来实现期望的行为通常是一个更好的主意。例如，您可以通过使用range（）、timer（）和map（）来实现上述可观察性的等效。

Answer 2

你正在创建一个“热”可观察的，所以即使没有订户，它也会发光。

使用newobservable（）创建可观察对象时，您可以选择返回所谓的teardown（或dispose）函数，该函数应在需要时清理任何资源。

因此，在您的情况下，您需要停止计时器。

new Observable(subscriber => {
  ...
  const handler = setTimeout(() => {...});

  return () => clearTimeout(handler);
});

或者，如果您有多个计时器，您可以对所有计时器调用clearTimeout。