js中setinterval怎么用？怎么才能讓setinterval停下來？

setinterval()是定時(shí)調(diào)用的函數(shù)，可按照指定的周期（以毫秒計(jì)）來調(diào)用函數(shù)或計(jì)算表達(dá)式。

setinterval()的作用是在播放動(dòng)畫的時(shí)，每隔一定時(shí)間就調(diào)用函數(shù)，方法或?qū)ο蟆?/p>

setInterval() 方法會(huì)不停地調(diào)用函數(shù)，直到 clearInterval() 被調(diào)用或窗口被關(guān)閉。

由 setInterval()返回的ID值可用作clearInterval() 方法的參數(shù)。 

setInterval動(dòng)作的語法格式如下：

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

后面就兩個(gè)參數(shù)code是你的js代碼，millisec為時(shí)間間隔，以毫秒計(jì)。

第一種格式是標(biāo)準(zhǔn)動(dòng)作面板中setInterval函數(shù)的默認(rèn)語法，第二種格式是在專家模式動(dòng)作中使用的方法。

其中的參數(shù)function是一個(gè)函數(shù)名或者一個(gè)對(duì)匿名函數(shù)的引用。

object參數(shù)指定從Object對(duì)象派生的對(duì)象。

methodName制定 object參數(shù)中要調(diào)用的方法。

interval制定對(duì)function或methodName調(diào)用兩次之間的時(shí)間，單位是毫秒。

后面的arg1等是可選的參數(shù)，用于制定傳遞給function或是methodName的參數(shù)。

setInterval它設(shè)置的時(shí)間間隔小于動(dòng)畫幀速（如每秒10幀，相當(dāng)于100毫秒），則按照盡可能接近interval的時(shí)間間隔調(diào)用函數(shù)。而且必須使用updateAfterEvent動(dòng)作來確保以足夠的頻率刷新屏幕。如果interval大于動(dòng)畫幀速，則只用在每次播放頭進(jìn)入某一幀是才調(diào)用，以減小每次刷新屏幕的影響。

下面的例子每隔1秒調(diào)用一次匿名函數(shù)。

setInterval(function(){trace("每隔1秒鐘我就會(huì)顯示一次")},1000);//這里的function(){}是沒有函數(shù)名的函數(shù)。成為匿名函數(shù)，后面的1000是時(shí)間間隔，單位是毫秒。

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

上面已經(jīng)將函數(shù)的setInterval方法介紹了。下面我們將介紹對(duì)象的setInterval方法。

首先，寫一個(gè)setInterval在動(dòng)作中調(diào)用對(duì)象的方法的例子，該例子不需要傳遞參數(shù)。

myobj=new Object();//創(chuàng)建一個(gè)新的對(duì)象
myobj.interval=function){
    trace("每隔1秒顯示一次");
}//創(chuàng)建對(duì)象的方法。
setInterval(myobj,"interval",1000);//設(shè)定時(shí)間間隔調(diào)用對(duì)象的方法。

接下來介紹如何傳遞參數(shù)。其實(shí)道理和函數(shù)的傳遞參數(shù)是一樣的。

myobj=new Object();
myobj.interval-function(str){
    trace(str);
}
setInterval(myobj,"interval",2000," 每隔2秒我就會(huì)顯示一次");

注意。要調(diào)用為對(duì)象定義的方法時(shí)，必須在專家模式中使用第二種語法格式。這樣子的話呢，我們來作一個(gè)動(dòng)態(tài)顯示時(shí)間的畫面?？梢杂孟旅娴拇a實(shí)現(xiàn)。

setInterval(show,1000);
function show(){
    time=new Date();
    hour=time.getHours();
       minu=time.getMinutes();
       sec=time.get.Seconds();
    datetime=hour+":"+minu+":"+sec;
}//這里的datetime是一個(gè)動(dòng)態(tài)文本框的變量名字。

用clearinterval命令讓setinterval停下來

時(shí)間間隔可以用 setInterval 命令來創(chuàng)建并用 clearInterval 命令來終止。setInterval 所用的參數(shù)有兩種格式。在第一種格式中，你傳遞給 setInterval 的參數(shù)可以是一個(gè)函數(shù)名，一段時(shí)間上的間隔以及一些傳遞給前面函數(shù)的相關(guān)參數(shù)。當(dāng) setInterval 運(yùn)行時(shí)它會(huì)依照規(guī)定的時(shí)間間隔依次將列出的參數(shù)傳遞給指定的函數(shù)，直到你調(diào)用 clearInterval 將其終止。相關(guān)的示范代碼如下： 

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

js實(shí)例代碼1：

function auto(){ 
    alert("到時(shí)間了") 
} 
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實(shí)例代碼2：

<table> 
    <tr> 
        <td nowrap="nowrap" bgcolor="#E8E8E8">自動(dòng)更新</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多個(gè)Store

我們知道Ext js加載Store是異步加載的，這有很多好處，這里不再說明。但有時(shí)也需要多個(gè)store同步加載，比如：動(dòng)態(tài)解析生成圖表，需要同時(shí)加載完成圖表樣式、圖表軸、圖表序列和圖表數(shù)據(jù)之后才能完整解析生成圖表，任意一個(gè)store沒有加載完成時(shí)，解析數(shù)據(jù)都會(huì)造成解析錯(cuò)誤，所以必須保證全部store加載完成后才能正確進(jìn)行解析。要怎么保存多個(gè)store加載的同步呢？具體實(shí)現(xiàn)如下：

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加載完成后執(zhí)行  
var timer = setInterval(function(){  
    if(bChartArr[0] && bChartArr[1] && bChartArr[2] && bChartArr[3]){  
        clearInterval(timer); // 清除等待  
        // 解析圖表樣式、軸、序列動(dòng)態(tài)生成圖表  
        me.createChartPanel();  
    }  
},100);  

這樣就有效的解決了Ext多個(gè)異步加載的store的同步問題。

說明：這里使用了數(shù)組來判斷數(shù)據(jù)是否加載完成。其實(shí)另外兩個(gè)方法應(yīng)該也是可以的：

1、使用一個(gè)計(jì)數(shù)代替數(shù)組，每個(gè)store加載完成時(shí)給計(jì)數(shù)加1，最后判斷計(jì)數(shù)達(dá)到預(yù)期值；

2、對(duì)Store不使用callback，而使用store的isLoading()方法，當(dāng)所有Stroe的isLoading( )都返回false時(shí)認(rèn)為加載完成。

在JS腳本中，多個(gè)setinterval之間出現(xiàn)干擾怎么辦？

不能同時(shí)執(zhí)行是肯定的，必然有一個(gè)先后次序，但是可以幾乎是同時(shí)運(yùn)行。如果你確定是互擾的問題，可以只定義一個(gè)setinterval，例如：

var timeIntervalNumber = 1;
var timeInterval = setInterval('doSomething()', 1000);
function doSomething() {
    if (timeIntervalNumber % 2) {...}
    if (timeIntervalNumber % 5) {...}
    timeIntervalNumber ++;
    if (timeIntervalNumber >= 2 * 5) {
        timeIntervalNumber = 1;
    }
}

或者如下面代碼所示，頁面也不會(huì)報(bào)錯(cuò)或者卡殼。

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