js定時器setInterval()與setTimeout()區別、10秒自動跳轉

Html代碼  

<div class="jf_register">  
    <h2>您好，歡迎光臨<fmt:message key="b2cShowName"/>！<a class="blue" href="<%=path%>/LoginRegist_turnToLogin">請登陸</a></h2>  
</div>  
<div class="jf_register_banner">註冊成功</div>  
<div class="jf_password">  
<ul>  
<li> 感謝您選擇<fmt:message key="b2cShowName"/>，</li><li>您的帳號<span>  
<font color=red><strong>${param.bussinessId}</strong></font></span>已經註冊成功。 </li>  
<li>系統將會在<strong id="endtime"></strong>秒後跳轉到登陸頁！  
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;  
<a class="blue" href="<%=path%>/LoginRegist_turnToLogin">直接登陸</a></li>  
</ul>  
</div>  
<div class="jf_loginfooter"><fmt:message key="copyright"/>&nbsp;版權全部&nbsp;|   
<a href="Login_loginHelpTips">聯繫咱們</a><fmt:message key="copyrightIcp"/></div>  
  
<script type="text/javascript">  
var i = 10;  
function remainTime(){  
    if(i==0){  
        location.href='<%=path%>';  
    }  
    document.getElementById('endtime').innerHTML=i--;  
    setTimeout("remainTime()",1000);  
}  
remainTime();  
</script>

  

setInterval()循環執行相應的方法

<script type="text/javascript">
      setInterval("myInterval()",1000);//1000爲1秒鐘
       function myInterval()
       {
            alert('aaaaaaaaa');
        }
 </script>

(1)setTimeout(Expression,DelayTime),在DelayTime事後,將執行一次Expression,setTimeout 運用在延遲一段時間，再進行某項操做。

setTimeout("",time) 設置一個超時對象

(2)setInterval(expression,delayTime),每一個DelayTime,都將執行Expression.經常可用於刷新表達式.

setInterval("",time) 設置一個超時對象

SetInterval爲自動重複，setTimeout不會重複。

(3)clearTimeout(對象) 清除已設置的setTimeout對象

(4)clearInterval(對象) 清除已設置的setInterval對象

 

4.1 我在項目中這樣使用setTimeout () ：

Js代碼  

<!-- 系統公告緊急彈窗 -->  
<script type="text/javascript" src="<%=path%>/js/jquery-1.4.4.min.js"></script>  
<script type="text/javascript" src="<%=path%>/js/artDialog/artDialog.min.js"></script>      
<script type="text/javascript">  
    function querySystemNotice()  
    {  
        $.post( 'bussinessNotice_querySystemNotice', {},   
                function(returnedData,status)  
                {  
                    if( returnedData!= null && returnedData!='' )  
                    {  
                        $.dialog.open('<%=path%>/  
                                bussinessNotice_bussinessNoticedetail?noticeNum='+returnedData,{  
                            window:'top',  
                            width: '800px',  
                            height: '400px',  
                            title:false,  
                            border:false,  
                            lock: true,  
                            esc:false,  
                            left:'center',  
                            content:'',  
                            yesText:'確認閱讀',  
                            yesFn: function(){  
                                $.post( '<%=path%>/  
                                        bussinessNotice_bussinessNoticeAffirmRead?noticeNum='+returnedData,{},  
                                    function(returnedData2,status)  
                                    {  
                                        //art.dialog.tips('已閱讀！',1);  
                                        window.location.reload();  
                                });  
                            }  
                        });  
                    }  
                    else  
                    {  
                        window.location.reload();  
                    }  
                });  
    }  
  
    setTimeout("querySystemNotice()",1000*60);//1000爲1秒鐘,設置爲1分鐘。  
 </script>

 

4.2 我在項目中使用 setInterval()：

Java代碼 

<script type="text/javascript">  
    var value = '${sessionScope.refTime}';  
    setInterval("refMoney()", value);  
    /*更新商戶姓名、佣金額、資金額*/  
    function refMoney(){  
        $.ajax({  
            type:'post',  
            url:'Login_refMoney',  
            async: false ,  
            dataType:'json',  
            success:function(data){  
                $("#bussinessName").html("");  
                $("#bussinessAccount").html("");  
                $("#bussinessCommission").html("");  
                $("#bussinessName").html(data.bussinessName);  
                $("#bussinessAccount").html(data.bussinessAccount);  
                $("#bussinessCommission").html(data.bussinessCommission);  
            }  
        });  
    }  
    //refMoney();  
      
    /*退出系統*/  
    function logout(){  
        if(confirm("肯定退出系統嗎?")) {  
            window.parent.parent.location.replace("<%=path%>");  
        }  
    }  
</script>

 

Html代碼  

<div class="welcome">  
    歡迎&nbsp;&nbsp;<font id="bussinessName">
                        ${user.bussinessName }  
                    </font>&nbsp;&nbsp;&nbsp;&nbsp;  
    佣金額：<font id="bussinessAccount">  
               <fmt:formatNumber value="${user.bussinessAccount }" pattern="#0.00" type="number"/>  
            </font>&nbsp;&nbsp;&nbsp;&nbsp;  
    資金額：<font id="bussinessCommission">  
               <fmt:formatNumber value="${user.bussinessCommission }" pattern="#0.00" type="number"/>  
            </font>&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;  
     <a href="<%=path%>/Login_loginRight" target="main" >平臺首頁</a>&nbsp; &nbsp;&nbsp;|&nbsp;&nbsp  
     <a href="javascript:logout();" >安全退出</a>  
</div>

5.轉載內容：

setTimeout和setInterval的使用

這兩個方法均可以用來實如今一個固定時間段以後去執行JavaScript。不過二者各有各的應用場景。

方 法

實際上，setTimeout和setInterval的語法相同。它們都有兩個參數，一個是將要執行的代碼字符串，還有一個是以毫秒爲單位的時間間隔，當過了那個時間段以後就將執行那段代碼。

不過這兩個函數仍是有區別的，setInterval在執行完一次代碼以後，通過了那個固定的時間間隔，它還會自動重複執行代碼，而setTimeout只執行一次那段代碼。

雖然表面上看來setTimeout只能應用在on-off方式的動做上，不過能夠經過建立一個函數循環重複調用setTimeout，以實現重複的操做：

File: settimeout_setinterval.js

s

howTime();
function showTime()
{
    var today = new Date();
    alert( " The time is: " + today.toString());
    setTimeout( " showTime() " , 5000 );
}

一旦調用了這個函數，那麼就會每隔5秒鐘就顯示一次時間。若是使用setInterval，則相應的代碼以下所示：

File: settimeout_setinterval2.js

 

setInterval( " showTime() " , 5000 );
function showTime()
{
    var today = new Date();
    alert( " The time is: " + today.toString());
}

這兩種方法可能看起來很是像，並且顯示的結果也會很類似，不過二者的最大區別就是，setTimeout方法不會每隔5秒鐘就執行一次showTime函數，它是在每次調用setTimeout後過5秒鐘再去執行showTime函數。這意味着若是showTime函數的主體部分須要2秒鐘執行完，那麼整個函數則要每7秒鐘才執行一次。而setInterval卻沒有被本身所調用的函數所束縛，它只是簡單地每隔必定時間就重複執行一次那個函數。

若是要求在每隔一個固定的時間間隔後就精確地執行某動做，那麼最好使用setInterval，而若是不想因爲連續調用產生互相干擾的問題，尤爲是每次函數的調用須要繁重的計算以及很長的處理時間，那麼最好使用setTimeout。

函數指針的使用

兩個計時函數中的第一個參數是一段代碼的字符串，其實該參數也能夠是一個函數指針，不過Mac下的IE 5對此不支持。

若是用函數指針做爲setTimeout和setInterval函數的第二個參數，那麼它們就能夠去執行一個在別處定義的函數了：

setTimeout(showTime, 500);
function showTime()
{
    var today = new Date();
    alert("The time is: " + today.toString());
}

另外，匿名函數還能夠聲明爲內聯函數：

setTimeout(function(){
    var today = new Date();
    alert("The time is: " + today.toString());
}, 500);

討 論

若是對計時函數不加以處理，那麼setInterval將會持續執行相同的代碼，一直到瀏覽器窗口關閉，或者用戶轉到了另一個頁面爲止。不過仍是有辦法能夠終止setTimeout和setInterval函數的執行。

當setInterval調用執行完畢時，它將返回一個timer ID，未來即可以利用該值對計時器進行訪問，若是將該ID傳遞給clearInterval，即可以終止那段被調用的過程代碼的執行了，具體實現以下：

File: settimeout_setinterval3.js (excerpt)

var intervalProcess = setInterval( " alert('GOAL!') " , 3000 );
var stopGoalLink = document.getElementById( " stopGoalLink " );
attachEventListener(stopGoalLink, " click " , stopGoal, false );
function stopGoal()
{
clearInterval(intervalProcess);
}

只要點擊了stopGoalLink，無論是何時點擊，intervalProcess都會被取消掉，之後都不會再繼續反覆執行intervalProcess。若是在超時時間段內就取消setTimeout，那麼這種終止效果也能夠在setTimeout身上實現，具體實現以下：

File: settimeout_setinterval4.js (excerpt)

 

var timeoutProcess = setTimeout( " alert('GOAL!') " , 3000 );
var stopGoalLink = document.getElementById( " stopGoalLink " );
attachEventListener(stopGoalLink, " click " , stopGoal, false );
function stopGoal()
{
clearTimeout(timeoutProcess);
}