在前端开发中，我们经常需要处理一些耗时的操作，例如将数据从服务器获取并展示到页面上。为了提高用户体验，我们希望这些操作能够在后台执行，而不会阻塞用户界面。AngularJS 通过 Deferred 对象提供了一种解决方案，可以让我们轻松地创建长时间运行的计时器任务。
Deferred 对象简介
Deferred 对象是 AngularJS 所提供的一种异步编程模型，用于管理异步函数的状态。它包含了三种状态：未完成（pending）、已完成（resolved）和已拒绝（rejected）。我们可以通过调用 deferred.resolve() 和 deferred.reject() 方法来改变 Deferred 对象的状态。
下面是一个简单的例子：
--- -------- - ----------- ---------------------------------------------- - -------------------------------- -- --------------- - ----------------------- --- ------ -----------------
在这个例子中，我们通过 $http 服务从服务器获取数据。当请求成功时，我们使用 deferred.resolve() 将 Deferred 对象的状态设为已完成，并返回响应数据。当请求失败时，我们使用 deferred.reject() 将 Deferred 对象的状态设为已拒绝，并返回错误信息。最后，我们通过 deferred.promise 返回 Deferred 对象的 Promise 对象，以便其他代码可以使用它来等待异步操作的完成。
长时间执行计时器任务
除了管理异步函数的状态之外，Deferred 对象还可以用于创建长时间运行的计时器任务。为了演示这个功能，我们将创建一个展示当前时间的应用程序，它每秒钟更新一次。
首先，我们需要创建一个服务来获取当前时间：
-------------------- ------------------ -
--- ------- - ---
-------- -------- -
------------ - --- -------
---------------- ------
-
---------
------ --------
---在这个服务中，我们使用 $timeout 服务来实现定时器功能。update() 函数会在每秒钟被调用一次，并将当前时间存储到 service.time 变量中。最后，我们通过调用 update() 函数一次来启动计时器任务。
接下来，我们需要创建一个控制器来展示当前时间：
--------------------------------- --------------- - --- -- - ----- -------- - ------ ---
在这个控制器中，我们将 clock 服务注入进来，并将其赋值给 vm.clock 变量。这样，在模板中就可以使用 {{vm.clock.time | date:'hh:mm:ss'}} 来展示当前时间了。
最后，我们需要编写一个简单的 HTML 模板来展示当前时间：
---- ------------------------------ -- ---- ------------------- - ---------------------- ------
现在，当我们运行这个应用程序时，它将每秒钟更新一次当前时间，并展示到页面上。
总结
AngularJS 的 Deferred 对象提供了一种方便的方式来管理异步函数的状态，并创建长时间运行的计时器任务。通过学习本文中的示例代码，我们可以更好地理解这一功能，并在实际项目中应用它。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/25454