setTimeout()和setInterval(),settimeout
setTimeout()和setInterval()兩個方法都是JavaScript的計時事件
相同
1.兩者都為HTML DOM Window對象的兩個方法
使用可以寫成
window.setTimeout();
window.setInterval();
當然不加window也是可以的。
2.兩者都有兩個參數
setTimeout("javascript function",milliseconds);
setInterval("javascript function",milliseconds);
第一個參數是一個方法
第二個參數是間隔時間(毫秒)
不同
1.
setTimeout();只執行一次,傳入一個毫秒數時間到達後執行一次傳入function函數,執行完後函數失效。
setInterval(); 迴圈執行,在傳入毫秒間隔時間內迴圈執行傳入function函數,執行後不失效。(clearInterval() 方法用於停止 setInterval() 方法執行的函數代碼。 )
執行個體
實現倒數三秒後跳轉當前頁面,並在頁面顯示出倒數。
1.頁面
<body style="background-color : #EAEAEA; color :#A3A3A3"><div><span id="totalSecond">3</span>秒後自動返回首頁</div></body>
2.JS代碼
2.1 setTimeout();實現
function timeout() {var total = totalSecond.innerText; if(total <= 0) {location.href = "http://www.baidu.com";} else {totalSecond.innerText = --total;window.setTimeout("timeout()", 1000);}}window.setTimeout("timeout()", 1000);
2.2 setInterval();實現
function interval() {var total = totalSecond.innerText; if(total <= 0) {location.href = "http://www.baidu.com";} else {totalSecond.innerText = --total;}}window.setInterval("interval()", 1000);
注意:
setTimeout和setInterval在頁面載入後會自動執行。所以不需要添加document.onload事件。
當然如果兩者需要調用function那麼調用的function必須要在setTimeout和setInterval代碼的前面。
因為js在頁面是自上而下啟動並執行,如果放在setTimeout和setInterval的後面則其調用的function為無效方法,程式就會出問題。
如下就是錯誤的
window.setInterval("interval()", 1000); function interval() {var total = totalSecond.innerText; if(total <= 0) {location.href = "http://www.baidu.com";} else {totalSecond.innerText = --total;}}
還有一個三秒後頁面跳轉的方法,在head標籤裡添加如下代碼,當然頁面秒數顯示還需要自己添加
<meta http-equiv="Refresh" content="3; url=http://www.baidu.com.cn" />