AngularJs 延时器、计时器实例代码

AngularJS的延时器与计时器实例代码

一、$timeout延时器

在AngularJS应用中，我们可以通过$timeout服务实现延时操作。以下是一个简单的实例：

```javascript

app.controller("main", function($scope, $timeout) {

$scope.pink = "pink";

$scope.box = "第二个盒子";

$timeout(function() {

$scope.pink = "第一个盒子内容，延迟两秒后改变";

}, 2000);

setTimeout(function() {

$scope.pink = "第一个盒子内容，延迟3秒后改变";

$scope.$apply(); // 手动更新视图

}, 3000);

});

```

在这个例子中，我们使用了AngularJS的$timeout服务来延迟改变变量的值。我们也展示了如何使用原生的JavaScript setTimeout方法来实现类似的功能。需要注意的是，在AngularJS应用中，当改变作用域中的变量时，通常需要调用$scope.$apply()来手动更新视图。

二、$interval计时器

$interval服务允许我们设置定时任务，每隔一定的时间执行一次。以下是一个简单的实例：

```javascript

var timer = $interval(function() {

console.log(1);

}, 1000);

// 当需要停止计时器时，使用以下代码清除计时器：

$interval.cancel(timer);

```

我们还可以利用$interval创建一个点击倒计时功能。当用户点击按钮时，开始倒计时，按钮在倒计时期间不可用。以下是实现这一功能的代码：

```html

{{num}}

```

在AngularJS控制器中：

```javascript

$scope.flag = false;

$scope.clickb = function() {

$scope.flag = true; // 禁用按钮

$scope.num = 5; // 设置倒计时时间（秒）

var int = $interval(function() {

$scope.num--; // 每秒递减一次倒计时时间

if ($scope.num == -1) { // 当倒计时结束，重新启用按钮并显示提示信息

$scope.flag = false; // 启用按钮