定时器
在js中有两种定时器：
-
一次性定时器：setTimeout()
-
周期性循环定时器: setInterval()
setTimeout()
只在指定的时间后执行一次
<script type="text/javascript">
//定时器 异步运行
function hello() {
alert("hello");
}
//使用方法名字执行方法
var t1 = window.setTimeout(hello, 1000);
var t2 = window.setTimeout("hello()", 3000); //使用字符串执行方法
window.clearTimeout(t1); //去掉定时器
</script>
setInterval()
在指定时间为周期循环执行
/实时刷新 时间单位为毫秒
setInterval('refreshQuery()',8000);
/* 刷新查询 */
function refreshQuery(){
console.log('每8秒调一次')
}
两种方法根据不同的场景和业务需求择而取之，
对于这两个方法，需要注意的是如果要求在每隔一个固定的时间间隔后就精确地执行某动作，那么最好使用setInterval，
而如果不想由于连续调用产生互相干扰的问题，尤其是每次函数的调用需要繁重的计算以及很长的处理时间，那么最好使用setTimeout
定时器应用
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box {
100px;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="box">我的盒子</div>
<button id="clear">清除定时器</button>
<button id="start">开启定时器</button>
<script type="text/javascript">
odiv = document.getElementById("box");
ostart = document.getElementById("start");
var num = 0;
let timer;
clearId = document.getElementById("clear");
clearId.onclick = function() {
clearInterval(timer);
}
ostart.onclick = function() {
//开启定时器，先清除原来的定时器
clearInterval(timer);
timer = setInterval(function() {
num++;
console.log(num)
odiv.style.marginLeft = (num * 1.5) + 'px'
}, 100)
}
</script>
</body>
</html>