js中setinterval怎么用？怎么才能让setinterval停下来？

OStack程序员社区-中国程序员成长平台 › 门户 › 编程› JavaScript›JavaScript Dom手册

原作者: [db:作者] 来自: [db:来源] 收藏邀请

setinterval()是定时调用的函数，可按照指定的周期（以毫秒计）来调用函数或计算表达式。setinterval()的作用是在播放动画的时，每隔一定时间就调用函数，方法或对象。setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval()返回的ID值可用作clearInterval() 方法的参数。 setInterval动作的语法格式如下：

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

后面就两个参数code是你的js代码，millisec为时间间隔，以毫秒计。第一种格式是标准动作面板中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是一个动态文本框的变量名字。

用clearinterval命令让setinterval停下来

时间间隔可以用 setInterval 命令来创建并用 clearInterval 命令来终止。setInterval 所用的参数有两种格式。在第一种格式中，你传递给 setInterval 的参数可以是一个函数名，一段时间上的间隔以及一些传递给前面函数的相关参数。当 setInterval 运行时它会依照规定的时间间隔依次将列出的参数传递给指定的函数，直到你调用 clearInterval 将其终止。相关的示范代码如下：

function show(){ 
trace("每隔一秒我就会显示一次"); 
} 
var sh; 
sh=setInterval(show,1000); 
clearInterval(sh);

js实例代码1：

function auto(){ 
alert("到時間了") 
} 
var monitorInterval = null;  
function setAuto(time,isFrist){ 
var intervalTime=time; 
if(isFrist!="1"){ 
if(intervalTime!="off"){ 
monitorInterval= setInterval("auto()", intervalTime*1000); 
}else{ 
if(monitorInterval){    
clearInterval(monitorInterval); 
monitorInterval = null; 
} 
} 
} 
}

html实例代码2：

<table> 
<tr> 
<td nowrap="nowrap" bgcolor="#E8E8E8">自動更新</td> 
<td align="left" bgcolor="#E8E8E8"><select 
onchange="setAuto(this.value,'0')"> 
<option value="10">10sec</option> 
<option value="20">20sec</option> 
<option value="30">30sec</option> 
<option value="60">1min</option> 
<option value="300">5min</option> 
<option value="600">10min</option> 
<option value="1800">30min</option> 
<option value="3600">60min</option> 
<option value="off">Stay</option> 
</select></td> 
</tr> 
</table>

使用setinterval同步加载Ext多个Store

我们知道Ext js加载Store是异步加载的，这有很多好处，这里不再说明。但有时也需要多个store同步加载，比如：动态解析生成图表，需要同时加载完成图表样式、图表轴、图表序列和图表数据之后才能完整解析生成图表，任意一个store没有加载完成时，解析数据都会造成解析错误，所以必须保证全部store加载完成后才能正确进行解析。要怎么保存多个store加载的同步呢？具体实现如下：

var bChartArr =[false, false, false, false];  
//加载图表轴  
Ext.getStore("ChartAxes").load(  
{  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[0] = true;  
    }  
});  
//加载图表序列  
Ext.getStore("ChartSeries").load(  
{  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[1] = true;  
    }  
  
});  
//加载图表样式  
Ext.getStore("ChartStyle").load(  
{  
    params:{ queryId:queryId },  
    callback:function(){  
        bChartArr[2] = true;  
    }  
});  
// 按钮  
Ext.getStore("Buttons").load(  
{  
    params:{query_id:queryId},  
    scope:this,  
    callback:function(){  
        bChartArr[3] = true;  
    }  
});  
var me = this;  
// 等待所有的Storoe加载完成后执行  
var timer = setInterval(function(){  
    if(bChartArr[0] && bChartArr[1] && bChartArr[2] && bChartArr[3]){  
        clearInterval(timer); // 清除等待  
        // 解析图表样式、轴、序列动态生成图表  
        me.createChartPanel();  
    }  
},100);

这样就有效的解决了Ext多个异步加载的store的同步问题。

说明：这里使用了数组来判断数据是否加载完成。其实另外两个方法应该也是可以的：

1、使用一个计数代替数组，每个store加载完成时给计数加1，最后判断计数达到预期值；

2、对Store不使用callback，而使用store的isLoading()方法，当所有Stroe的isLoading( )都返回false时认为加载完成。

在JS脚本中，多个setinterval之间出现干扰怎么办？

不能同时执行是肯定的，必然有一个先后次序，但是可以几乎是同时运行。如果你确定是互扰的问题，可以只定义一个setinterval，例如：

var timeIntervalNumber = 1;

var timeInterval = setInterval('doSomething()', 1000);

function doSomething() {

if (timeIntervalNumber % 2) {...}

if (timeIntervalNumber % 5) {...}

timeIntervalNumber ++;

if (timeIntervalNumber >= 2 * 5) {

timeIntervalNumber = 1;

}

}

或者如下面代码所示，页面也不会报错或者卡壳。

var firstInterval;
var secondInterval;
function firstAlert(){
	if(firstInterval) clearInterval(firstInterval);
<span style="white-space:pre">	</span>//处理所有
<span style="white-space:pre">	</span>.........
<span style="white-space:pre">	</span>firstInterval = setInterval('firstAlert()', 1000*2);
}


function secondAlert(){
	if(secondInterval) clearInterval(secondInterval);
<span style="white-space:pre">	</span>//处理所有
<span style="white-space:pre">	</span>.......


secondInterval = setInterval('secondAlert()', 1000*3);
	}