在js 中定时 一般会用到setTimeout 和 setInterval 函数.其中setTimeout 只能运行一次,只有在处理函数里面再嵌套一个setTimeout才能完成不断的调用,从而实现定时功能,这比较繁琐,还是用setInterval吧.
下面是一个setInterval的代码例子:
<html>
<head>
<meta charset='utf-8'>
<title>js setInterval 定时器</title>
<style>
div{
width:200px;
height:100px;
border:1px red solid;
color:blue;
font-size:20px;
display:flex;
justify-content:center;
align-items:center;
}
</style>
</head>
<body>
<div id = 'msg'>
需要支持flex box 的浏览器
<script>
function $(id)
{
return document.getElementById(id);
}
var i = 0
var m = 1
var sum = 0;
var tid = setInterval(function(){
$('msg').innerText = i
i = i + m
if(i % 10 == 0)
{
m = -1
sum ++
}
if(i == 0)
m = 1
if (sum == 2)
{
clearInterval(tid);
}
},1000)//这里即使是不设置1000,或给0值 也会运行一次
</script>
</div>
</body>
</html>
同时要注意js 是单线程的语言,只能被其它线程调用.setInterval 和 setTimeout 也不能构成多线程. 这两个方法表示将要执行的任务,加入到主线程的队列中,等前面的的线程队列中的任务执行完成了,才会执行定时器中的任务.