運行定時器：當我們想手動開啟定時器時，我們可以用一個函式來包裝這個定時器，這樣的話呼叫函式時就能開啟定時器，例如：
function time() {
setInterval(function(){
alert('定時器開啟成功')
}, 2000)
} //將定時器寫進函式，
time(); //呼叫函式，結束定時器：當我們想停止定時器時，可以對定時器本身進行命名，并運用clearInterval函式來結束定時器的運作，
var t = setInterval(function () {
alert('定時器開啟成功')
}, 2000) //用t來對定時器進行命名
clearInterval(t); //消除名字為t的這個定時器接下來是一個完整案例，分別運用兩個button按鈕來控制一個div盒子的運行和停止
<!DOCTYPE html>
<html lang="zh=CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
position: absolute;
top: 250px;
left: 300px;
height: 100px;
width: 100px;
border: 2px solid black;
border-radius: 10px;
}
button {
height: 30px;
width: 60px;
position: absolute;
top: 200px;
left: 290px;
}
button.stop {
position: absolute;
top: 200px;
left: 360px;
}
</style>
</head>
<body>
<button class="right">往右</button>
<button class="stop">停止</button>
<div>
</div>
<script>
var div = document.querySelector('div');
var btn = document.querySelector('button.right');
var stop = document.querySelector('button.stop');
var showtime = function () {
div.style.left = div.offsetLeft + 1 + 'px';
}
var t;
function time() {
t = setInterval(showtime, 20)
}
btn.addEventListener('click', function () {
clearInterval(t);
time();
})
stop.addEventListener('click', function () {
clearInterval(t);
})
</script>
</body>
</html>
謝謝大家，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/296620.html
標籤：其他
下一篇：人類高質量JS防抖與節流機制