在前端开发中,我们经常需要处理一些耗时的操作,例如将数据从服务器获取并展示到页面上。为了提高用户体验,我们希望这些操作能够在后台执行,而不会阻塞用户界面。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()
函数一次来启动计时器任务。
接下来,我们需要创建一个控制器来展示当前时间:
app.controller('ClockController', function(clock) { var vm = this; vm.clock = clock; });
在这个控制器中,我们将 clock
服务注入进来,并将其赋值给 vm.clock
变量。这样,在模板中就可以使用 {{vm.clock.time | date:'hh:mm:ss'}}
来展示当前时间了。
最后,我们需要编写一个简单的 HTML 模板来展示当前时间:
<div ng-controller="ClockController as vm"> <h1>{{vm.clock.time | date:'hh:mm:ss'}}</h1> </div>
现在,当我们运行这个应用程序时,它将每秒钟更新一次当前时间,并展示到页面上。
总结
AngularJS 的 Deferred 对象提供了一种方便的方式来管理异步函数的状态,并创建长时间运行的计时器任务。通过学习本文中的示例代码,我们可以更好地理解这一功能,并在实际项目中应用它。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/25454