JavaScript中setInterval的用法总结

 更新时间:2013年11月20日 09:17:42   作者:  
这篇文章主要是对JavaScript中setInterval的用法进行了详细的总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助

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);

相关文章

  • js中将String转换为number以便比较

    js中将String转换为number以便比较

    string没转换就拿去比较,结果是很头疼的,下面为大家介绍下js中String转换为number,需要的朋友可以参考下
    2014-07-07
  • JS实现图片上下切换

    JS实现图片上下切换

    这篇文章主要为大家详细介绍了JS实现图片上下切换,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • javascript 原型与原型链的理解及应用实例分析

    javascript 原型与原型链的理解及应用实例分析

    这篇文章主要介绍了javascript 原型与原型链的理解及应用,结合实例形式分析了javascript原型与原型链的具体原理、功能、使用方法及操作注意事项,需要的朋友可以参考下
    2020-02-02
  • javascript简单写的判断电话号码实例

    javascript简单写的判断电话号码实例

    这篇文章主要介绍了javascript简单写的判断电话号码实例的相关资料,需要的朋友可以参考下
    2017-05-05
  • Dom加载让图片加载完再执行的脚本代码

    Dom加载让图片加载完再执行的脚本代码

    当大家使用window.onload执行一个函数时,必须要等到页面上的图片等信息全部加载完毕之后才执行的。但很多时候图片的数量比较多,所以需要很多时间下载。更令人尴尬的是,当网页文档(或者说Dom)已经加载完毕,而图片尚未加载完毕,很多用户已经开始浏览网页,但这时很多由window.onload所触发的函数不能执行,这就导致一部分功能不能完美地给用户使用,更严重的是会给用户留下不好的印象!
    2008-05-05
  • fullPage.js和CSS3实现全屏滚动效果

    fullPage.js和CSS3实现全屏滚动效果

    这篇文章主要为大家详细介绍了fullPage.js和CSS3实现全屏滚动效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-05-05
  • 详解ES6 中的Object.assign()的用法实例代码

    详解ES6 中的Object.assign()的用法实例代码

    这篇文章主要介绍了ES6 Object.assign()的用法及用途,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-01-01
  • typescript中正则表达式的常用使用方法

    typescript中正则表达式的常用使用方法

    这篇文章主要给大家介绍了关于typescript中正则表达式的常用使用方法,TypeScript是一种静态类型的JavaScript超集,它提供了对正则表达式的全面支持,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • Cropper.js进阶之固定宽高图片裁切实现示例

    Cropper.js进阶之固定宽高图片裁切实现示例

    这篇文章主要为大家介绍了Cropper.js进阶之固定宽高图片裁切实现示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-05-05
  • 微信小程序实现弹框效果

    微信小程序实现弹框效果

    这篇文章主要为大家详细介绍了微信小程序实现弹框效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-05-05

最新评论