AngularJs $interval 和 $timeout

Posted 2020-09-02 Lonely existence, lonely burni

$interval

window.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。

间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知，并且到达规定迭代次数后被取消，如果迭代次数未定义，则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔，调用$intreval.cancel(promise)。

备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。

使用：$interval(fn,delay,[count],[invokeApply],[Pass]);

fn:一个将被反复执行的函数。

delay：每次调用的间隔毫秒数值。

count：循环次数的数值，如果没设置，则无限制循环。

invokeApply：如果设置为false，则避开脏值检查，否则将调用$apply。

Pass：函数的附加参数。

方法：

cancel(promise);

取消与承诺相关联的任务。

promise：$interval函数的返回值。

使用代码：

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$interval",testCtrl]);
    function testCtrl($interval){
      var toDo = function () {
          console.log("Hello World");
      };
      $interval(toDo, 3000, 10);
    };
  }());

$timeout

window.setTimeout的Angular包装形式。Fn函数包装成一个try/catch块，代表$exceptionHandler服务里的任何异常。

timeout函数的返回值是一个promise，当到达设置的超时时间时，这个承诺将被解决，并执行timeout函数。

需要取消timeout，需要调用$timeout.cancel(promise);

使用： $timeout(fn,[delay],[invokeApply]);

fn：一个将被延迟执行的函数。

delay：延迟的时间（毫秒）。

invokeApply：如果设置为false，则跳过脏值检测，否则将调用$apply。

方法：

cancel(promise);

取消与承诺相关联的任务。这个的结果是，承诺将被以摒弃方式来解决。

promise：$timeout函数返回的承诺。

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$timeout",testCtrl]);
    function testCtrl($timeout){
      var toDo = function () {
          console.log("Hello World");
      };
      $timeout(toDo,5000)
    };
  }());

 

$interval,$timeout使用方法详解：

1. 先将$interval,$timeout,作为参数注入到controller中,例如rds.controller(‘controllerCtrl‘, [‘app‘, ‘$scope‘,‘$http‘,‘$routeParams‘,‘$filter‘,‘$location‘,‘$interval‘,‘$timeout‘,

    function (app, $scope,$http,$routeParams,$filter,$location,$interval,$timeout) {
2.在需要用的地方写上该方法 例如  $scope.timer = $interval( function(){

    $scope.backup("1");
  }, 10000);

一开始以为是把需要调用的方法直接写在function(){}的位置,发现方法走到定时器时直接执行了该方法并没有循环执行,后来发现需要把需要调用的方法写在function内,10000表示10秒循环一次.如果要定义循环次数 只需要写成如下这样 $scope.timer = $interval( function(){

    $scope.backup("1");
  }, 10000,3); 3代表循环3次就自动停止循环了.

3.终止定时器 $interval.cancel($scope.timer);

4.$timeout的用法也类似 ,只是$timeout是延迟多少秒后循环一次,而$interval是每隔多少秒循环一次,如果不终止就一直循环

下面是摘自博客 比较高大上的介绍

interval

window.setInterval的Angular包装形式。Fn是每次延迟时间后被执行的函数。

间隔函数的返回值是一个承诺。这个承诺将在每个间隔刻度被通知，并且到达规定迭代次数后被取消，如果迭代次数未定义，则无限制的执行。通知的值将是运行的迭代次数。取消一个间隔，调用$intreval.cancel(promise)。

备注：当你执行完这项服务后应该把它销毁。特别是当controller或者directive元素被销毁时而$interval未被销毁。你应该考虑到在适当的时候取消interval事件。

使用：$interval(fn,delay,[count],[invokeApply],[Pass]);

fn:一个将被反复执行的函数。

delay：每次调用的间隔毫秒数值。

count：循环次数的数值，如果没设置，则无限制循环。

invokeApply：如果设置为false，则避开脏值检查，否则将调用$apply。

Pass：函数的附加参数。

方法：

cancel(promise);

取消与承诺相关联的任务。

promise：$interval函数的返回值。

使用代码：

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$interval",testCtrl]);
    function testCtrl($interval){
      var toDo = function () {
          console.log("Hello World");
      };
      $interval(toDo, 3000, 10);
    };
  }());

$timeout

window.setTimeout的Angular包装形式。Fn函数包装成一个try/catch块，代表$exceptionHandler服务里的任何异常。

timeout函数的返回值是一个promise，当到达设置的超时时间时，这个承诺将被解决，并执行timeout函数。

需要取消timeout，需要调用$timeout.cancel(promise);

使用： $timeout(fn,[delay],[invokeApply]);

fn：一个将被延迟执行的函数。

delay：延迟的时间（毫秒）。

invokeApply：如果设置为false，则跳过脏值检测，否则将调用$apply。

方法：

cancel(promise);

取消与承诺相关联的任务。这个的结果是，承诺将被以摒弃方式来解决。

promise：$timeout函数返回的承诺。

  (function () {
    angular.module("Demo", [])
    .controller("testCtrl",["$timeout",testCtrl]);
    function testCtrl($timeout){
      var toDo = function () {
          console.log("Hello World");
      };
      $timeout(toDo,5000)
    };
  }());

 

大致使用方法可以和原生js的setInterval和setTimeout那样使用，一些使用小技巧可以用在浏览器单线程的事件执行方面...  详情推荐看破狼的文章“JavaScript单线程和浏览器事件循环简述”，也可以关注其微信公众号["shuang_lang_shuo"]，里面有很多不错的文章。