AngularJs 定时器/时间轴服务

心已赠人 2021-07-24 22:54 400阅读 0赞

时间轴服务
    	1、NG中也能写js语法,因为输入js范围
    	2、使用时需要在控制器脚本中注入
    	3、注入服务参数可以有多个
    
    
    	(1)间隔调用服务$interval
    		1、使用时需要在controller脚本中注入$interval
    		2、计时器序号=$interval(function(){},调用间隔毫秒数)
    
    	(2)延迟调用服务$timeout
    		1、使用时需要在controller脚本中注入$timeout
    		2、计数器序号=$timeout(function(){},延迟调用毫秒)
    
    	(3)清除时间轴服务
    		$interval.cancel(计时器序号);
    		$timeout.cancel(计时器序号);

代码示例:

<html ng-app='app' ng-controller='main' >
    <head>
    	<meta charset="utf-8">
    	<meta name='viewport' content='width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0'>
    	<title ng-bind='mainTitle'></title>
    
    	<script src='js/angular.js'></script>
    	<script src='js/angular.route.min.js'></script>	
    	<style>
    
    	</style>
    </head>
    <body >
    
    <script>
    	var app=new angular.module('app',[]);
    
    
    	app.controller('main',['$scope','$interval','$timeout',function($scope,$interval,$timeout){ 
    			
    			$scope.timer=null;
    
    			$scope.timer= $interval(function(){ 
    				console.log('2');
    
    				$interval.cancel($scope.timer);
    			},1000)
    
    			var time2=null;
    
    
    			time2=$timeout(function(){ 
    				console.log(10);
    			},2000)
    			$timeout.cancel(time2);
    	}])
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，400人围观）

还没有评论，来说两句吧...

相关阅读

相关 Flutter时间轴

一，真实点,直接上图吧。 [github地址][github] [视频教学地址][Link 1] ![在这里插入图片描述][watermark_type_ZmFu

墨蓝/ 2022年12月24日 10:48/ 0 赞/ 166 阅读

相关 AngularJS之定时器（timeout）

1、问题背景 AngularJS某一时间段后，出现另一种情况，这里需要用到定时器timeout 2、实现源码 <!DOCTYPE html>

旧城等待，/ 2022年07月16日 23:10/ 0 赞/ 165 阅读

相关 angularjs服务

<!DOCTYPE html> <html ng-app="app"> <head> <title>dd</title> <scri

- 日理万妓/ 2022年07月15日 01:59/ 0 赞/ 175 阅读

相关 AngularJS 定时器(获取当前日期)

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF

ゝ一纸荒年。/ 2022年07月12日 08:14/ 0 赞/ 189 阅读

相关 AngularJS 定时器(获取当前日期)

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta charset="UTF

╰半夏微凉°/ 2022年07月12日 08:14/ 0 赞/ 166 阅读

相关 AngularJs服务-$timeout or $interval(定时器)

<!DOCTYPE html> <html lang="en" ng-app="App"> <head> <meta cha

傷城~/ 2022年07月12日 07:07/ 0 赞/ 158 阅读

相关 angularjs周期性定时器

var app = angular.module("app"); app.controller("appController", function (

Bertha 。/ 2022年05月28日 01:54/ 0 赞/ 197 阅读

相关 Angularjs 服务

AngularJS 服务(Service)：www.runoob.com/angularjs/angularjs-services.html AngularJS 内建了30

「爱情、让人受尽委屈。」/ 2022年05月21日 04:50/ 0 赞/ 238 阅读

相关 WPF时间轴

首先时间轴使用slider控件，得到如图效果 ![时间轴][20190108141717895.png] 代码如下： <Grid Grid.Row="2">

太过爱你忘了你带给我的痛/ 2022年03月29日 10:56/ 0 赞/ 478 阅读

相关 AngularJs 定时器/时间轴服务

时间轴服务 1、NG中也能写js语法,因为输入js范围 2、使用时需要在控制器脚本中注入 3、注入服务参数可以有多个

心已赠人/ 2021年07月24日 22:54/ 0 赞/ 401 阅读