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 相关文章推荐
javascript全局变量封装模块实现代码
Nov 28 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
Feb 21 Javascript
实例解析jQuery中proxy()函数的用法
May 24 Javascript
实用又漂亮的BootstrapValidator表单验证插件
May 30 Javascript
JS中常用的输出方式(五种)
Jun 12 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
解决微信内置浏览器返回上一页强制刷新问题方法
Feb 05 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
Apr 27 Javascript
AngularJS 验证码60秒倒计时功能的实现
Jun 05 Javascript
React Native中TabBarIOS的简单使用方法示例
Oct 13 Javascript
关于React Native 无法链接模拟器的问题
Jun 21 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中防止SQL注入实现代码
2011/02/19 PHP
使用PHP Socket写的POP3类
2013/10/30 PHP
PHP程序员必须清楚的问题汇总
2014/12/18 PHP
php中删除数组的第一个元素和最后一个元素的函数
2015/03/07 PHP
php实现简单爬虫的开发
2016/03/28 PHP
jQuery 操作XML入门
2008/12/25 Javascript
各种常用浏览器getBoundingClientRect的解析
2009/05/21 Javascript
jquery 无限级联菜单案例分享
2013/03/26 Javascript
javascript创建和存储cookie示例
2014/01/07 Javascript
Jquery性能优化详解
2014/05/15 Javascript
解决node-webkit 不支持html5播放mp4视频的方法
2015/03/11 Javascript
jqGrid 学习笔记整理——进阶篇(一 )
2016/04/17 Javascript
AngularJS包括详解及示例代码
2016/08/17 Javascript
javascript实现下雨效果
2017/03/27 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
在vue-cli脚手架中配置一个vue-router前端路由
2017/07/03 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue v-for 使用问题整理小结
2019/08/04 Javascript
vue实现扫码功能
2020/01/17 Javascript
Python中文件操作简明介绍
2015/04/13 Python
Python实现建立SSH连接的方法
2015/06/03 Python
Python实现文件按照日期命名的方法
2015/07/09 Python
Python探索之ModelForm代码详解
2017/10/26 Python
python音频处理用到的操作的示例代码
2017/10/27 Python
Python学习之Anaconda的使用与配置方法
2018/01/04 Python
使用python判断jpeg图片的完整性实例
2019/06/10 Python
解决Django加载静态资源失败的问题
2019/07/28 Python
Python基于类路径字符串获取静态属性
2020/03/12 Python
使用python实现名片管理系统
2020/06/18 Python
python 列表推导和生成器表达式的使用
2021/02/01 Python
惠普加拿大在线商店:HP加拿大
2017/09/15 全球购物
材料专业毕业生求职信
2014/02/26 职场文书
勤奋学习演讲稿
2014/05/10 职场文书
社区党的群众路线教育实践活动总结材料
2014/10/31 职场文书
司机岗位职责范本
2015/04/10 职场文书
2015年十月一日放假通知
2015/08/18 职场文书