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


Posted in Javascript onSeptember 16, 2017

1.$timeout延时器

apptest.controller("main",function($scope,$timeout){
  $scope.pink="pink";
  $scope.box="第二个盒子";
  $timeout(function(){
   $scope.pink="第一个盒子内容,延迟两秒后改变了";
  },2000);
setTimeout(function(){
  $scope.pink="第一个盒子内容,延迟3秒后改变了";
   $scope.$apply();//手动更新视图
},3000);
}

2.$interval计时器

//计时器
var timer= $interval(function(){
   console.log(1);
 },1000);
//清除计时器
 $interval.cancel(timer);

点击不可用

<button ng-click="clickb()" ng-disabled="flag">{{num}}</button>
$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;
      $scope.num="点击倒计时5秒";
      $interval.cancel(int);
    }
  },1000);
});

总结

以上所述是小编给大家介绍的AngularJs 延时器、计时器实例代码,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jquery获取颜色在ie和ff下的区别示例介绍
Mar 28 Javascript
基于jquery固定于顶部的导航响应浏览器滚动条事件
Nov 02 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
微信小程序 详解下拉加载与上拉刷新实现方法
Jan 13 Javascript
javascript 中设置window.location.href跳转无效问题解决办法
Feb 09 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
Vue中的Props(不可变状态)
Sep 29 Javascript
微信小程序实现张图片合成为一张并下载
Jul 16 Javascript
openLayer4实现动态改变标注图标
Aug 17 Javascript
vue router-link 默认a标签去除下划线的实现
Nov 06 Javascript
一百多行代码实现react拖拽hooks
Mar 23 Javascript
引入JavaScript时alert弹出框显示中文乱码问题
Sep 16 #Javascript
Javascript 严格模式use strict详解
Sep 16 #Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 #Javascript
JS闭包的几种常见形式实例详解
Sep 16 #Javascript
ES6中Array.find()和findIndex()函数的用法详解
Sep 16 #Javascript
详解JS构造函数中this和return
Sep 16 #Javascript
Angular使用Md5加密的解决方法
Sep 16 #Javascript
You might like
在VS2008中编译MYSQL5.1.48的方法
2010/07/03 PHP
PHP CURL或file_get_contents获取网页标题的代码及两者效率的稳定性问题
2015/11/30 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
js select option对象小结
2013/12/20 Javascript
Javascript基础知识(三)BOM,DOM总结
2014/09/29 Javascript
使用jQuery jqPlot插件绘制柱状图
2014/12/18 Javascript
jQuery DOM删除节点操作指南
2015/03/03 Javascript
javascript+html5实现仿flash滚动播放图片的方法
2015/04/27 Javascript
js+html5实现canvas绘制简单矩形的方法
2015/06/05 Javascript
Jquery揭秘系列:ajax原生js实现详解(推荐)
2016/06/08 Javascript
js转html实体的方法
2016/09/27 Javascript
jQuery展示表格点击变色、全选、删除
2017/01/05 Javascript
Vue的elementUI实现自定义主题方法
2018/02/23 Javascript
深入Vue-Router路由嵌套理解
2018/08/13 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
Vue 前端实现登陆拦截及axios 拦截器的使用
2019/07/17 Javascript
python实现从字典中删除元素的方法
2015/05/04 Python
详解Python中的__new__、__init__、__call__三个特殊方法
2016/06/02 Python
读取本地json文件,解析json(实例讲解)
2017/12/06 Python
Python比较2个时间大小的实现方法
2018/04/10 Python
tensorflow学习笔记之mnist的卷积神经网络实例
2018/04/15 Python
HTML5之SVG 2D入门12—SVG DOM及DOM操作介绍
2013/01/30 HTML / CSS
美国网上眼镜供应商:LEOTONY(眼镜、RX太阳镜和太阳镜)
2017/10/31 全球购物
英国简约舒适女装品牌:Great Plains
2018/07/27 全球购物
娱乐地球:Entertainment Earth
2020/01/08 全球购物
高级Java程序员面试要点
2013/08/02 面试题
儿媳婚宴答谢词
2014/01/14 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
领导失职检讨书
2014/02/24 职场文书
2014年入党积极分子党课学习心得体会模板
2014/04/03 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
Nginx解决前端访问资源跨域问题的方法详解
2021/03/31 Servers
python编程实现清理微信重复缓存文件
2021/11/01 Python
解决Redis启动警告问题
2022/02/24 Redis
漫改真人电影「萌系男友是燃燃的橘色」公开先导视觉图
2022/03/21 日漫
element tree树形组件回显数据问题解决
2022/08/14 Javascript