咸鱼前端—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>
