一、延時器(setTimeout) 1.延時器(setTimeout)的工作方式是:當設定一個延時器是5s後進行時,並不代表它5s後就立即執行,只是代表它5s後會被加入隊列,如果5s後,隊列沒有其他東西,那麼延時器的代碼會立即執行,否則會延遲執行。 因此,關於延時器最重要的一點是:指定的時間間隔(如 ...
一、延時器(setTimeout)
1.延時器(setTimeout)的工作方式是:當設定一個延時器是5s後進行時,並不代表它5s後就立即執行,只是代表它5s後會被加入隊列,如果5s後,隊列沒有其他東西,那麼延時器的代碼會立即執行,否則會延遲執行。
因此,關於延時器最重要的一點是:指定的時間間隔(如設置5s後執行),表示何時將延時器加入到隊列,而不是何時真正執行代碼。
二、定時器(setInterval)
1.定時器的一大特點是每隔一段時間(如每隔2s)就會執行,一直重覆。這樣有個問題:設定一個定時器a每隔2s執行一次,如果a執行的時間(executiveTime)大於時間間隔(2s),那麼,第一次執行的a還沒執行完第一次,就開始執行第二次了。
js巧妙地避免了這個問題——即等到定時器的代碼執行完後,再去將定時器的代碼加入到隊列中,所以定時器代碼加入隊列的最小時間間隔即指定間隔(因為理想狀態是是定時器的執行時間在時間間隔內完成)。
2.使用setInterval的問題
(1)某些間隔會被跳過——如設置每個1s執行一次,如果該定時器代碼執行時間大於1s,或者正好等於1s,那麼,相當於代碼執行時間正好等於間隔時間,那麼,這個間隔時間就被執行時間占據了,所以就沒有了間隔時間即沒有間隔。
利用定時器製作一個倒計時功能,有開始、暫停、繼續、複位功能。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<style>
#content{display: block;width: 200px;height: 200px;border: 1px solid black;margin: 20px auto;text-align: center;line-height: 200px;font-size: 50px;}
#btn{width: 200px;height: 40px;border: 1px solid black;border-radius: 10px;margin: 20px auto;display: block;cursor: pointer;background: blue;color: #FFFFFF;font-size: 25px;}
</style>
</head>
<body>
<span id="content">
100
</span>
<input type="button" id="btn" value="開始">//定義一個功能按鈕
<script>
var ocontent = document.getElementById("content");
var obtn = document.getElementById("btn");
var start = ocontent.innerHTML;
var num = ocontent.innerHTML;
var timer = null; //設置全局變數
var onoff = 1; //開關
obtn.onclick = function(){
if(onoff == 1){ //當開關等於1時,執行開始倒計時功能
clearInterval(timer); //清除計時器,避免重覆點擊開關時,造成bug
timer=setInterval(function(){
if(num == 1){
num = "結束了"
obtn.value="複位"
clearInterval(timer);
onoff = 2;
}else{
num--;
}
ocontent.innerHTML = num;
},100)
onoff =0; //“定義”到暫停的功能
obtn.value = "暫停" //點擊按鈕時,obtn.value變為暫停
}else if(onoff == 0){ //暫停功能
clearInterval(timer);
onoff = 1; //暫停之後繼續倒計時
obtn.value = "繼續" //obtn.value變為繼續
}else if(onoff == 2){ //啟動複位功能
obtn.value = "開始";
onoff = 1;
num = start;
ocontent.innerHTML = start;
}
}
</script>
</body>
</html>
效果如下: