JS基礎入門篇（十三）—定時器
1.定時器
定義：當咱們須要隔一段時間，再執行一段代碼。或者每隔一段時間，執行一段代碼。咱們能夠使用定時器。
使用場景：例如網站輪播圖的自動滾動。廣告延遲彈出的某些操做css
2.定時器-setInterval
定時器-setInterval基本定義html
- setInterval
間隔型定時器：每隔一段時間執行一段代碼。
注意：代碼通常會重複執行 - 語法
setInterval（函數，時間間隔）;
eg:
setInterval（fn，20）;指的是每隔20 毫秒執行一段函數
時間間隔的單位 ： 是毫秒（ms）1s = 1000ms - 返回值
setInterval（重複執行的代碼，時間間隔）;這段代碼的返回值是分配定時器一個獨有的編號。這個編號跟關閉定時器有關。當你開啓不少定時器的時候，你想關閉哪個定時器，就須要知道對應的編號而後關閉。就是每開啓一個定時器，會給這個定時器貼一個編號，編號是數字類型的，會由這段代碼的返回值傳遞出編碼。
使用舉例1—無參函數函數
<script>
//方式一：函數爲匿名函數
setInterval(function () {
console.log(1);
},1000);
//方式二：有名函數-part1
function fn() {
console.log(2);
}
setInterval(fn,1000);
//方式二：有名函數-part2
function go() {
console.log(3);
}
setInterval("go()",1000);
</script>
使用舉例2—有參函數性能
<script>
//方式一：有名函數的傳參
function fn(a,b) {
console.log(a,b);
}
setInterval("fn('c','d')",1000);
//方式二：匿名函數的傳參
setInterval(function(a,b,c){
console.log(a,b,c);
},1000,"a","b","c");
</script>
注意：網站
<script>
//如下代碼只是開了一個定時器，會在1s以後執行這個函數。
setInterval(function(){
console.log(1);
},1000);
console.log(222);
console.log(333);
</script>
如下是代碼執行結果：先打印222和333。以後1s後打印1.
編碼
3.setInterval—輪播圖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:400px;
height:400px;
border:2px solid black;
background: red;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var num=0;
var L=data.length;
setInterval(function () {
num++;
//L%num的結果永遠會小於L，而且是0，1，2，····L-1這樣循環的。
num%=L;
box.style.backgroundColor=data[num];
},1000);
</script>
</body>
</html>
自動播放效果，能夠點擊查看。由於codepen不方便放圖片，就用顏色代替spa
4.setInterval—輪播圖的中止
css樣式我就刪除了，直接給出js和html。須要所有代碼的能夠從連接下面去看。點擊連接中的css，html，js均可以查看對應的代碼。code
方式一：控制步長來中止輪播圖的運動，可是定時器還沒關（聽語言描述可能有些模糊，直接上代碼）
經過步長來控制中止輪播圖的運動，點擊查看效果htm
<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var stop=document.getElementById("stop");
var num=0;
var step=1;
var L=data.length;
setInterval(function () {
//經過step來控制顏色的轉化。
num+=step;
num%=L;
box.style.backgroundColor=data[num];
//能夠從 console.log(1)看出定時器沒關閉，就算中止輪播了，依舊不停的打印1.
console.log(1);
},1000);
stop.onclick=function () {
//讓step爲0，圖片就中止在那個地方。可是定時器沒關。
step=0;
};
</script>
</body>
</html>
方式二：經過一個變量來控制定時器中函數的執行，可是定時器仍是沒關。
經過onoff變量來控制定時器內函數的執行遞歸
<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var stop=document.getElementById("stop");
var num=0;
//默認爲true。
var onoff=true;
var L=data.length;
setInterval(function () {
//button點擊以後，onoff爲false，則沒法執行
if(onoff) {
num++;
num %= L;
box.style.backgroundColor = data[num];
}
console.log(1);
},1000);
stop.onclick=function () {
//點擊以後爲false。
onoff=false;
};
</script>
</body>
</html>
方式三：經過關閉定時器來中止輪播圖的運動。
此方法簡潔，不須要添加額外的變量。可是有時候也須要以上兩種方法。
直接關閉定時器，點擊css，html，js能夠查看對應代碼
<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var stop=document.getElementById("stop");
var num=0;
var L=data.length;
//setInterval(）方法返回的是定時器的編號。這個編號是獨有的。
var timer=setInterval(function () {
num++;
num %= L;
box.style.backgroundColor = data[num];
console.log(1);
},1000);
stop.onclick=function () {
//clearInterval（），經過傳入定時器的編號來。關閉定時器
clearInterval(timer);
};
</script>
</body>
</html>
5.setInterval—輪播圖的中止和開始
方式一：清除定時器，再開啓定時器。
清除定時器，再開啓定時器。注意：從新開啓定時器的時候也要清除前一個定時器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#box{
width:400px;
height:400px;
border:2px solid black;
background: red;
}
button{
width: 100px;
line-height: 50px;
background: cornflowerblue;
color: #fff;
font-size: 20px;
border:none;
margin-top: 10px;
outline: none;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<button id="star">開始播放</button>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var stop=document.getElementById("stop");
var star=document.getElementById("star");
var num=0;
var L=data.length;
function move() {
num++;
num %= L;
box.style.backgroundColor = data[num];
};
var timer=setInterval(move,1000);
stop.onclick=function () {
//clearInterval（），經過傳入定時器的編號來。關閉定時器
clearInterval(timer);
};
star.onclick=function () {
//每次開啓定時器的時候，先清除前一個定時器。由於當用戶重複點擊開始按鈕，就會打開多個定時器。
//因此，每次打開定時器，先清除前一個。
clearInterval(timer);
timer=setInterval(move,1000);
}
</script>
</body>
</html>
方式二：使用變量控制定時器的開始與中止
使用step步長控制定時器的開始與中止
<div id="box"></div>
<button id="stop">中止播放</button>
<button id="star">開始播放</button>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var stop=document.getElementById("stop");
var star=document.getElementById("star");
var num=0;
var L=data.length;
var step=1;
function move() {
num+=step;
num %= L;
box.style.backgroundColor = data[num];
};
setInterval(move,1000);
stop.onclick=function () {
//中止按鈕，step=0
step=0;
};
star.onclick=function () {
//開始按鈕，step=1
step=1;
}
</script>
方式三：使用變量從新開始定時器
使用變量從新開始定時器
<body>
<div id="box"></div>
<button id="stop">中止播放</button>
<button id="star">開始播放</button>
<script>
data=["red","blue","yellow","pink"];
var box=document.getElementById("box");
var stop=document.getElementById("stop");
var star=document.getElementById("star");
var num=0;
var L=data.length;
var isPlay=true;
function move() {
num++;
num %= L;
box.style.backgroundColor = data[num];
};
var timer=setInterval(move,1000);
stop.onclick=function () {
clearInterval(timer);
isPlay=false;
};
star.onclick=function () {
if(!isPlay){//沒有在播放就開始定時器
timer=setInterval(move,1000);
}
isPlay=true;//改變狀態
}
</script>
</body>
6.定時器-setTimeout
定時器-setTimeout基本定義
-
延遲型定時器
隔一段時間執行一段代碼（執行一次）
-
語法：
setTimeout(函數,時間間隔)
好比setTimeout(fn,20)隔（等待）20 毫秒執行一段函數
時間間隔的單位 ：是毫秒（ms）
1s = 1000ms - 返回值：定時器惟一的編號
- 注意：雖然只執行一次，就不執行了。可是仍是要關閉定時器，否則會消耗性能。
1.舉例說明
點擊查看如下代碼效果
<script>
//隔一秒頁面會彈出Hello。
var timer = setTimeout( function(){
alert("Hello");
},1000 );
//點擊頁面任何一個位置關閉定時器。
document.onclick = function(){
clearTimeout( timer );
}
</script>
2.使用遞歸，讓setTimeout定時器有setInterval的效果
點擊連接查看如下代碼效果！！！
<script>
var timer = 0;
function fn(){
timer = setTimeout( function(){
console.log(1);
//繼續調用fn，則在控制檯還會打印1。
fn();
},1000 )
}
fn();
document.onclick = function(){
clearTimeout( timer )
}
</script>
相關文章
- 1. JS基礎入門篇（十二）—對象
- 2. JS基礎入門篇（二十七）—BOM
- 3. JS基礎入門篇（十四）—運動
- 4. JS基礎入門篇（三十三）—正則表達式
- 5. JS基礎入門篇（三十六）—面向對象（ 三 ）
- 6. JS基礎入門篇（ 一 ）
- 7. JS基礎入門篇（一）
- 8. JS基礎入門篇（四十三）— ES6（一）
- 9. JS基礎入門篇（四十三）—ES6（二）
- 10. JS基礎入門篇（三十四）— 面向對象（一）
- 更多相關文章...
- • Memcached入門教程 - NoSQL教程
- • Kotlin 基礎語法 - Kotlin 教程
- • YAML 入門教程
- • Java Agent入門實戰（三）-JVM Attach原理與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. 外部其他進程嵌入到qt FindWindow獲得窗口句柄 報錯無法鏈接的外部符號 [email protected] 無法被([email protected]@[email protected]@@引用
- 2. UVa 11524 - InCircle
- 3. The Monocycle（bfs）
- 4. VEC-C滑窗
- 5. 堆排序的應用-TOPK問題
- 6. 實例演示ElasticSearch索引查詢term,match,match_phase,query_string之間的區別
- 7. 數學基礎知識 集合
- 8. amazeUI 復擇框問題解決
- 9. 揹包問題理解
- 10. 算數平均-幾何平均不等式的證明,從麥克勞林到柯西
歡迎關注本站公眾號,獲取更多信息
相關文章