鹹魚前端—js 定時器
setInterval()和clearInterval()
定時調用的函數，可以按照給定的時間(單位毫秒)週期調用函數
// 創建一個定時器，每隔1秒調用一次
var timerId = setInterval(function () {
var date = new Date();
console.log(date.toLocaleTimeString());
}, 1000);
// 取消定時器的執行
clearInterval(timerId);
setTimeout()和clearTimeout()
在指定的毫秒數到達之後執行指定的函數，只執行一次
// 創建一個定時器，1000毫秒後執行，返回定時器的標示
var timerId = setTimeout(function () {
console.log('Hello Xianyu');
}, 1000);
// 取消定時器的執行
clearTimeout(timerId);
案例：圖片點擊起舞（滑稽，我沒放圖片，請自行放圖片）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>title</title>
<style>
#box{
position:absolute;
}
#box img{
display: inline-block;
width: 200px;
height: 200px;
border:2px solid #666;
}
</style>
</head>
<body>
<input type="button" value="go" id="btn1">
<input type="button" value="stop" id="btn2">
<div id="box">
<img src="" alt="">
<img src="" alt="">
</div>
<script>
var xy$=function(id){
return document.getElementById(id)
}
var timeI = "";
xy$("btn1").onclick=function(){
//var timeI = setTimeout(function(){
var timeI = setInterval(function(){
//X和Y的座標爲1~200的隨機數
var x = parseInt(Math.random()*200+1);
var y = parseInt(Math.random()*200+1);
xy$("box").style.left=x+"px";
xy$("box").style.top=y+"px";
},400)
xy$("btn2").onclick=function(){
//clearTimeout(timeI)
clearInterval(timeI)
}
}
</script>
</body>
</html>