AngularJs中$timeout与$interval实际使用场景分析

最新推荐文章于 2020-06-04 09:57:57 发布
最新推荐文章于 2020-06-04 09:57:57 发布
阅读量460 收藏
点赞数
分类专栏： angularJS 文章标签： angularJs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dome_/article/details/79277540
版权

AngularJs中$timeout与$interval实际使用场景分析，类似于原生js中的setTimeout和setInterval，测试代码如下：

01<!DOCTYPE html>
02<html lang="en">
03<head>
04    <meta charset="UTF-8">
05    <title>$timeout与$interval实际使用场景分析</title>
06    <style type="text/css">
07        .ng-cloak{display:none;}
08    </style>
09</head>
10<body ng-app="app" ng-controller="ctr" ng-cloak class="ng-cloak">
11    {{num}}
12</body>
13</html>
14<script type="text/javascript" src="http://www.zymseo.com/js/demo.js"></script>
15<script type="text/javascript" src="http://www.zymseo.com/js/angular.min.js"></script>
16<script type="text/javascript">
17    var m = angular.module('app', []);
18    m.controller('ctr', ['$scope', '$timeout', '$interval', function($scope, $timeout, $interval){
19        $scope.num = 1;
20        /*var time = setTimeout(function(){
21            $scope.num += 1;
22            $scope.$apply();
23        },2000);*/
24 
25        /*var time = $timeout(function(){
26            $scope.num += 1;
27        },1000);
28        $timeout.cancel(time);*/
29 
30        var time = $interval(function(){
31            $scope.num += 1;
32            if($scope.num>=3){
33                $interval.cancel(time);
34            }
35        },1000);
36 
37 
38 
39    }])
40</script>

为了方便，在AngularJS构建的应用当中可以大量的使用它自带的服务。比如以上ctr控制器中的第一个延时器，如果不是用$timeout的话，想要实现同样的效果，就必须加上$scope.$apply()这段代码，而使用AngularJs自带的服务显然不需要！

K'illCode
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
angularjs之$timeout指令详解
01-19
angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. 用法: $timeout(fn, [delay], [invokeApply]); fn: 回调函数(必填) delay: number类型.延迟的时间(非必填),如果不填,表示等线程空下来以后就执行.比如当页面被渲染完成后. invokeApply: 布尔值.是否需要进行脏值检测(非必填
说说Angular中的$timeOut定时器
weixin_34331102的博客
11-17 977
 非常不幸的一点是，人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的、无须在意的函数。但是，如果你忘记了$timeOut()的回调函数将会造成非常不好的影响，你可能会因此遇到代码莫名其妙的出现问题，或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形。管理好你的$timeOut定时器的小技巧就是在$destory事件中将它们取消。 和...
AngularJS中$interval和$timeout的使用
11-18 247
[size=x-large]我们在项目中会出现定时刷新，延迟加载等多种场景。 接下来就看$interval和$timeout的使用 $interval可用于定时任务，我们只需在controller注入$interval即可使用.下面是每十秒钟执行一次alert()函数。[/size] [code="java"]app.controller("ctrl", function($scop...
AngularJs $timeout与$interval
书香水墨
11-15 256
一、概念 $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 二、$timeout var $timeout = $injector.get('$timeout'); var timer=$timeout(function(){ console.log('hello world') },2000); //该函数延迟2秒执行 timer.then...
AngularJs定时器$interval 和 $timeout详解
10-19
主要介绍了AngularJs定时器$interval 和 $timeout详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
AngularJS中$interval的用法详解
10-22
在AngularJS中$interval用来处理间歇性处理一些事情,接下来通过本文给大家介绍AngularJS中$interval的用法，需要的朋友参考下
AngularJS定时器的使用与移除操作方法【interval与timeout】
11-29
1.相比较于JS中setTimeInterval和setTimeout，AngularJS中通过interval来实现定时器的效果，通过timeout来实现时间延迟。 $timeout //实现的是延迟执行 $interval //实现的是定时器的效果 我们分别来看这两个服务 ...
angularjs之$timeout指令
weixin_45625044的博客
06-04 465
angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行. 如果需要取消一个timeout,调用$timeout.cancel(promise)方法. ...
AngularJs 服务之$timeout or $interval
11-19 1346
$timeout&$interval 服务 <!-- 服务:服务是一个对象或函数，对外提供特定的功能. 内建服务: 1: $location是对原生Javascript中location对象属性和方法的封装。 2: $timeout&$interval对原生Javascript中的setTimeout和setInterval进行了封装。 3: $filter在控制器中格式化数据。
angular $timeout
zhengxiaocai的博客
03-19 575
$rootScope.loop = function(){ $timeout(function(){ $rootScope.dashbSix(); if(!$rootScope.flagOver) { $rootScope.loop(); } else { $rootScope.isFiveZZ(); } },5000) }; $r
AngularJS $timeout
skysys的研究小屋
02-26 460
angular.js的$timeout指令对window.setTimeout做了一个封装,它的返回值是一个promise对象.当定义的时间到了以后,这个promise对象就会被resolve,回调函数就会被执行 如果需要取消一个timeout,调用$timeout.cancel(promise)方法 用法: $timeout(fn, [delay], [invokeApply]); fn: 回调...
AngularJs 使用 $timeout
DM专栏
04-07 3703
angular.module('myApp.test', ['ngRoute']) .config(['$routeProvider', function($routeProvider) { $routeProvider.when('/', { templateUrl: 'views/homePage/homePage.html',
AngularJS内置指令$timeout应用（下拉菜单）
GothaM24的博客
12-17 172
1、应用场景：鼠标经过菜单，弹出下拉菜单 2、鼠标从主菜单移动到下拉菜单，下拉菜单不关闭 3、鼠标从下拉菜单移动到主菜单，下拉菜单不关闭 HTML代码如下 <a href="javascript:;" ng-if="!lrf" class="avatar" ng-mouseenter="dshow()" ng-mouseleave="dhide()"> <img src="./...
Angular 定时器$timeout和$interval
xuanhaiyang2008的专栏
08-04 9211
项目中有用到定时器定时刷新页面的数据，在网上查看了一些资料，整理了一下，备忘。
5、Angular中的$timeOut定时器
欲望以提升热忱 毅力以磨平高山
03-23 2599
人们似乎常常将AngularJS中的$timeOut()函数看做是一个内置的、无须在意的函数。但是，如果你忘记了$timeOut()的回调函数将会造成非常不好的影响，你可能会因此遇到代码莫名其妙的出现问题，或者无端抛出一个错误甚至是一遍一遍的重复对的你的服务器进行$http请求这些诡异的情形。管理好你的$timeOut定时器的小技巧就是在$destory事件中将它们取消。   和javasc
AngularJS里面的$timeout和$interval服务
xyphf的博客
09-23 738
AngularJS里面的$timeout和$interval服务和window里面的setTimeout与setInterval的使用类似。$timeout里面可以写一个函数和一个时间(以毫秒为单位)$timeout(function(){},3000); //将要执行的代码字符串,时间写0的话并不是马上执行，而是放到执行队列的最后端$interval(function(){},3000);//以毫
$timeout
weixin_34367257的博客
10-11 117
１．先引入、 ２． (function() { "use strict"; angular.module("adminManageApp").controller('NoticePreviewController', NoticePreviewController); NoticePreviewController.$injector = ['$scope', 'RoleService',...
flink.checkpoint.timeout与flink.checkpoint.interval的关系
最新发布
07-14
`flink.checkpoint.timeout` 和 `flink.checkpoint.interval` 是 Flink 中与检查点相关的两个参数，它们之间存在一定的关系。 - `flink.checkpoint.timeout` 参数定义了执行检查点的超时时间，即当执行检查点操作时...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值