关键词

angularjs定时任务的设置与清除示例

AngularJS提供了$interval和$timeout两种方式来实现定时任务的设置和清除。

$interval用法示例如下:

angular.module('myApp', [])
  .controller('myController', ['$interval', function($interval){
    var vm = this;
    vm.count = 0;
    var timer = $interval(function(){
      vm.count++;
    }, 1000);  //每隔1秒才执行一次
    vm.stop = function(){
      $interval.cancel(timer);  //通过调用$interval.cancel方法来停止定时任务
    }
  }]);

上述代码中,定义了一个名为myController的控制器,并注入了$interval服务。在控制器中使用$interval创建了一个定时器,每隔1秒执行一次vm.count++操作。同时也定义了一个stop方法来停止定时任务,通过调用$interval.cancel方法来实现。

$timeout用法示例如下:

angular.module('myApp', [])
  .controller('myController', ['$timeout', function($timeout){
    var vm = this;
    vm.countdown = 5;
    var timer = $timeout(function(){
      vm.countdown--;
      vm.startCountdown();
    }, 1000); //每隔1秒执行一次vm.countdown--和vm.startCountdown操作
    vm.startCountdown = function(){
      if (vm.countdown > 0){
        timer = $timeout(function(){
          vm.countdown--;
          vm.startCountdown();
        }, 1000);
      }
    }
    vm.stop = function(){
      $timeout.cancel(timer);  //通过调用$timeout.cancel方法来停止定时任务
    }
  }]);

上述代码中,定义了一个名为myController的控制器,并注入了$timeout服务。在控制器中使用$timeout创建了一个定时器,每隔1秒执行一次vm.countdown--和vm.startCountdown操作。同时也定义了一个startCountdown方法来开始倒计时任务,并在该方法中使用递归的方式来实现倒计时。还定义了一个stop方法来停止定时任务,通过调用$timeout.cancel方法来实现。

这两个示例都展示了如何使用$interval和$timeout来启动和停止定时任务。注意,这两个服务都返回一个promise对象,因此可以使用.then方法来执行在定时任务完成后想要执行的回调函数。

本文链接:http://task.lmcjl.com/news/10123.html

展开阅读全文