我们在开发复杂的 Angular 应用时，经常会使用到 Rxjs 的 defer 函数，例如：

创建一个 Observable，在订阅时调用 Observable 工厂为每个新的 Observer 创建一个 Observable 对象。

该函数接收一个输入参数，类型为一个工厂函数。输出为一个 Observable 对象，一旦被订阅时，其绑定的工厂函数会被调用。

defer 的实质是延迟创建机制，即只有在返回的 Observable被订阅时，才开始创建 Observable 对象。

defer 允许你只在 Observer 订阅时创建一个 Observable。 它一直等到 Observer 订阅它，调用给定的工厂函数来获取一个 Observable —— 工厂函数通常会生成一个新的 Observable —— 并将 Observer 订阅到这个 Observable。 如果工厂函数返回一个假值，则使用 EMPTY 作为 Observable 代替。 最后但并非最不重要的是，工厂函数调用期间的异常通过调用 error 传递给观察者。

看下面这个具体的例子。

我们来单步调试下上面这段代码。首先进入 defer 内部执行逻辑：

在 defer 内部，直接构造一个新的 Observable，并且将工厂函数传入。该工厂函数在第8行被调用，用于生成一个包含应用程序业务逻辑的 Observable 对象，存储在 input 里。最后，将应用程序的subscriber 订阅到这个工厂函数返回的 Observable 上。

我们再单步执行，发现程序执行流从上图的第5行，跳转到了 第16行。这体现了 defer 函数延迟创建 Observable 对象的行为。所谓延迟创建，准确的说，应该是延迟了包含业务逻辑的 Observable 对象的创建。

紧接着，回到我们的应用代码，此时针对 defer 函数返回的 wrapper Observable 对象调用 subscribe，这时候就会触发包含业务逻辑的 Observable 对象的创建了：

defer 返回的 wrapper Observable 的订阅函数在此处执行：

调用工厂方法，进行包含业务逻辑的 Observable 对象创建：

当前随机数执行结果大于 0.5,返回 fromEvent 生成的新 Observable 对象。

紧接着，第24行的匿名函数 x => console.log(x)，每当屏幕被鼠标点击时，就会触发。这个匿名函数本来是订阅到 defer 函数返回的 wrapper Observable 对象的。当工厂函数返回了新的 Observable 对象后，它被自动订阅到这个新的 Observable 对象上。

总结 defer 的工作原理：

(1) defer 函数被调用时，传入一个工厂函数作为输入参数。这个工厂函数返回一个新的包含了业务逻辑的 Observable 对象。

(2) defer 函数返回另一个新的 Observable 对象，这个 Observable 对象称为 wrapper 或者 dummy Observable 对象，因为它不包含任何业务逻辑，存活的唯一价值就是，实现业务逻辑 Observable 对象的延迟创建。

(3) 当 wrapper Observable 被订阅时，触发工厂函数的执行，生成新的 Observable 对象，同时通知其 Observer.

更多Jerry的原创文章，尽在："汪子熙":