js中setInterval和setTimeout使用总结

setIntrval动作的语法格式

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

setInterval(function,interval[,arg1,arg2...argn])
setInterval(object,methoName,interval[,arg1,arg2,...argn])

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

其中的functuon函数一个函数名或者一个对匿名函数的引用.object参数指定从object对象派生的对象,methodName制定object参数中药调用的方法

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

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

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

下面的例子每隔1秒调用一次匿名函数。

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

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

window.onload=function(){
function show1(){
    console.log("每隔1秒显示一次");
}
function show2(str){
    console.log(str);
}
setInterval(show1,1000);
setInterval(show2,2000,"每隔2秒我就会显示一次");
//后面表示的是调用的具体字符串
}

效果

setInterval.png

上面已经将函数的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秒我就会显示一次");

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

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

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

效果

time.png

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

clearInterval动作

clearInterval动作的作用是清楚对setInterval函数的调用，它的语法格式如下

clearInterval(intervalid);
//intervalid是调用setInterval函数后返回的对象。

下面举一个简单的例子。

function show(){
   console.log("每隔一秒显示一次");
}
var sh;
sh=setInterval(show,1000);
clearInterval(sh);

setInterval动作

作用：超时调用
它接受两个参数：要执行的代码和以毫秒表示的时间（即在执行代码前需要等待多少毫秒）。其中第一个参数可以是一个包含JS代码的字符串（就和在 eval() 函数中使用的字符串一样），也可以是一个函数。第二个参数表示等待多长时间的毫秒数，但经过该事件后指定的代码不一定会执行。

这是因为JS是一个单线程序的解释器，一定时间内只能执行一段代码，为了控制要执行的代码就有一个JS任务队列，这些任务会按照将他们添加到队列的顺序执行。

setTimeout()的第二个参数告诉JS再过多长时间把当前任务添加到队列中。若队列为空，这段添加的代码会立即执行，若不为空，就要等前面的代码执行完再执行

//不建议传递字符串！可能会导致性能损失
setimeout("alert('hellow world!')",1000);
//推荐以匿名函数调用方式
var timeoutId = setTimeout(function(){
    alert("hellow world!");      
},1000);

clearTimeout(timeoutId);

调用setTimeout()之后，该方法会返回一个数值ID，ID是计划执行代码的唯一标示符，可以通过clearTimeout(ID)来取消未执行的超时调用.

和setInterval进行对比

setTimeout()只执行一次，如果要多次调用，可以使用setInterval(),或者自身多次调用setTimeout()

js中setInterval和setTimeout使用总结