JavaScript中setInterval的用法总结


Posted in Javascript onNovember 20, 2013

setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象。可以使用本动作更新来自数据库的变量或更新时间显示。

setInterval动作的语法格式如下:
setInterval(function,interval[,arg1,arg2,......argn])
setInterval(object,methodName,interval[,arg1,arg2,.....argn])

第一种格式是标准动作面板中setInterval函数的默认语法,第二种格式是在专家模式动作中使用的方法。

其中的参数function是一个函数名或者一个对匿名函数的引用。object参数指定从Object对象派生的对象。methodName制定 object参数中要调用的方法。

interval制定对function或methodName调用两次之间的时间,单位是毫秒。后面的arg1等是可选的参数,用于制定传递给function或是methodName的参数。

setInterval它设置的时间间隔小于动画帧速(如每秒10帧,相当于100毫秒),则按照尽可能接近interval的时间间隔调用函数。

而且必须使用updateAfterEvent动作来确保以足够的频率刷新屏幕。如果interval大于动画帧速,则只用在每次播放头进入某一帧是才调用,以减小每次刷新屏幕的影响。

下面的例子每隔1秒调用一次匿名函数。
setInterval(function(){trace("每隔1秒钟我就会显示一次")},1000);//这里的function(){}是没有函数名的函数。成为匿名函数,后面的1000是时间间隔,单位是毫秒。

下面的例子为我们展示如何带参数运行。

function show1(){
    trace("每隔1秒显示一次");
}
function show2(str){
    trace(str);
}
setInterval(show1,1000);
setInterval(show2,2000,"每隔2秒我就会显示一次");

上面已经将函数的setInterval方法介绍了。

下面我们将介绍对象的setInterval方法。

首先,写一个setInterval在动作中调用对象的方法的例子,该例子不需要传递参数。

myobj=new Object();//创建一个新的对象
myobj.interval=function){
    trace("每隔1秒显示一次");
}//创建对象的方法。
setInterval(myobj,"interval",1000);//设定时间间隔调用对象的方法。

接下来介绍如何传递参数。其实道理和函数的传递参数是一样的。
myobj=new Object();
myobj.interval-function(str){
    trace(str);
}
setInterval(myobj,"interval",2000," 每隔2秒我就会显示一次");

注意。要调用为对象定义的方法时,必须在专家模式中使用第二种语法格式。

这样子的话呢,我们来作一个动态显示时间的画面。可以用下面的代码实现。

setInterval(show,1000);
function show(){
    time=new Date();
    hour=time.getHours();
       minu=time.getMinutes();
       sec=time.get.Seconds();
    datetime=hour+":"+minu+":"+sec;
}//这里的datetime是一个动态文本框的变量名字。

这样子呢,setInterval这个方法大家应该学的很好了。现在呢,我们学习clearInterval.

clearInterval动作的作用是清楚对setInterval函数的调用,它的语法格式如下clearInterval(intervalid);intervalid是调用setInterval函数后返回的对象。

下面举一个简单的例子。

function show(){
    trace("每隔一秒显示一次");
}
var sh;
sh=setInterval(show,1000);
clearInterval(sh);
Javascript 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
js getElementsByTagName的简写方式
Jun 27 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
node爬取微博的数据的简单封装库nodeweibo使用指南
Jan 02 Javascript
关于JavaScript中forEach和each用法浅析
Jul 27 Javascript
bootstrap modal+gridview实现弹出框效果
Aug 15 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
移动端效果之Swiper详解
Oct 09 Javascript
Vue数据双向绑定的深入探究
Nov 27 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
Jul 31 jQuery
vue.js的简单自动求和计算实例
Nov 08 Javascript
微信小程序实现锚点功能
Nov 20 Javascript
JQuery操作iframe父页面与子页面的元素与方法(实例讲解)
Nov 20 #Javascript
jquery iframe操作详细解析
Nov 20 #Javascript
JS获取当前日期和时间的简单实例
Nov 19 #Javascript
js 自动播放的实例代码
Nov 19 #Javascript
鼠标滚轴控制文本框值的JS代码
Nov 19 #Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 #Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 #Javascript
You might like
PHP输入流php://input介绍
2012/09/18 PHP
destoon后台网站设置变成空白的解决方法
2014/06/21 PHP
PHP调用MySQL存储过程并返回值的方法
2014/12/26 PHP
thinkphp5.0自定义验证规则使用方法
2017/11/16 PHP
javascript eval函数深入认识
2009/02/21 Javascript
jQuery学习3:操作元素属性和特性
2010/02/07 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
jquery简单实现滚动条下拉DIV固定在头部不动
2013/11/25 Javascript
在myeclipse中如何加入jquery代码提示功能
2014/06/03 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
Javascript 赋值机制详解
2014/11/23 Javascript
使用jQuery在对象中缓存选择器的简单方法
2015/06/30 Javascript
JavaScript去除数组里重复值的方法
2015/07/13 Javascript
浅谈javascript运算符——条件,逗号,赋值,()和void运算符
2016/07/15 Javascript
JavaScript中ES6字符串扩展方法
2016/08/26 Javascript
Vue.js原理分析之observer模块详解
2017/02/17 Javascript
jquery 一键复制到剪切板的实例
2017/09/20 jQuery
Vue-cli3项目引入Typescript的实现方法
2019/10/18 Javascript
原生js实现弹幕效果
2020/11/29 Javascript
[01:58]2018DOTA2亚洲邀请赛趣味视频——交流
2018/04/03 DOTA
[01:57]2018年度DOTA2最具潜力解说-完美盛典
2018/12/16 DOTA
python 3利用Dlib 19.7实现摄像头人脸检测特征点标定
2018/02/26 Python
Python爬虫实现验证码登录代码实例
2019/05/10 Python
tensorflow之读取jpg图像长和宽实例
2020/06/18 Python
查看keras的默认backend实现方式
2020/06/19 Python
pytorch SENet实现案例
2020/06/24 Python
CSS3+font字体文件实现圆形半透明菜单具体步骤(图解)
2013/06/03 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
2016/04/26 HTML / CSS
香港时装购物网站:ZALORA香港
2017/04/23 全球购物
美国最大的在线水培用品商店:GrowersHouse.com
2018/08/14 全球购物
英国在线发型和美容产品商店:Beauty Cutie
2019/04/27 全球购物
广告设计应届生求职信
2014/03/01 职场文书
初三学生个人自我评定
2014/04/06 职场文书
文明家庭先进事迹材料
2014/05/14 职场文书
美容院员工规章制度
2015/08/05 职场文书
祝酒词范文
2015/08/12 职场文书