js-定時任務setInterval，setTimeout，clearInterval，clearTimeout

 

 

 

 

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

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

 

 

 

setTimeout()規定時間后執行

1.setTimeout(Expression,DelayTime),在DelayTime過后,將執行一次Expression,setTimeout 運用在延遲一段時間，再進行某項操作。
setTimeout("",time) 設置一個超時對象
2.setInterval(expression,delayTime),每個DelayTime,都將執行Expression.常常可用於刷新表達式.
setInterval("",time) 設置一個超時對象
SetInterval為自動重復，setTimeout不會重復。
3.1clearTimeout(對象) 清除已設置的setTimeout對象
3.2clearInterval(對象) 清除已設置的setInterval對象

 

 

 

setTimeout和setInterval的使用

這兩個方法都可以用來實現在一個固定時間段之后去執行JavaScript。不過兩者各有各的應用場景

方 法

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

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

雖然表面上看來setTimeout只能應用在on-off方式的動作上，不過可以通過創建一個函數循環重復調用setTimeout，以實現重復的操作：

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

 

一旦調用了這個函數，那么就會每隔5秒鍾就顯示一次時間。如果使用setInterval，則相應的代碼如下所示：

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。

 

討 論

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

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

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身上實現，具體實現如下：

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

 

 

 

 

 

 

10秒自動跳轉案例

 

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