定时器:
- setlnterval();
- setTimeout();
- clearlnterval();
- clearTimeout();
这四个函数都是全局对象window上的方法,内部函数this指向window
1.setlnterval();定时循环
每隔多长时间(千毫秒)执行一次函数
属性示例:
<script type="text/javascript">
setInterval(function() {
console.log('a');
},1000); //表示每隔一千毫秒执行一次(一秒)
</script>
下面给出这种赋值的形式,会按照每两秒一次执行吗?
<script type="text/javascript">
var time = 1000;
setInterval(function() {
console.log('a');
},time);
time = 2000;
</script>
是不可行的,因为:执行到time会取一次值,每隔time个时间执行一次这个函数,会多次执行这个函数,但识别这个time只识别一次,所以当初写的多少,它就会认为是多少,后面再改是没有用的,所以会始终按照1秒来执行。
缺点解析:
<script type="text/javascript">
var firstTime = new Date().getTime();
setInterval(function) {
var lastTame = new Date().getTime();
console.log(lastTime - firstTime);
firstTime = lastTime;
},1000);
</script>
//是非常不准的,误差很大
结论:setInterval是非常不准的,这里内部原理非常复杂,不用非得理解,知道误差极大即可。
特性:
1.setInterval是widow上的方法,所以它执行时作用域会上GO里面找
2.每个setInterval都会返回一个特定的数字作为唯一标识。
<script type="text/javascript">
var timer = setInterval(function(){
},1000);
var time2 = setInterval(function(){},2000);
</script>
这里我们可以看到在控制台输入timer会返回1,输入timer2会返回2,返回的数字是特定且不相同的。
思考:根据setInterval的定义(每隔多长时间(千毫秒)执行一次参数函数),这个函数的执行是没有终点的,那如果我们想让它在特定的位置停止,该用什么来实现?
这里用clearlnterval();来清除,清除时需要选中,这时我们就可以用特性二(返回特定数字)来进行选中了。
示例:
<script type="text/javascript">
var i = 0;
var timer = setInterval(function(){
console.log(i++);
if(i>10){
clearInterval(timer);
}
},10);
</script>
// 1 2 3 4 5 6 7 8 9 10
这也是清除定时器的方法。
2.setTimeout();推迟定时执行
推迟到一定的时间之后,再执行这个函数
应用:定时闹钟
类比的:setTimeout();也会返回一个特定的数字作为唯一标识,也需要用clearTimeout()来清除,使用方法和除了作用与setlnterval();不同之外,其余均可以类比使用。
setlnterval和setTimeout都可以这样使用:(”func()”,1000)
比如说:
setlnterval("console.log('a');",1000);
练习题:
计时器,到三分钟停止。
<html>
<head>
<meta charset="UTF-8">
<title>Date</title>
<style type="text/css">
input{
border: 1px solid rgba(0,0,0,0.8);
text-align:right;
font-size:20px;
font-weight:bold;
}
</style>
</head>
<body>
minutes:<input type="text" value="0">
seconds:<input type="text" value="0">
</body>
<script type="text/javascript">
var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0,
seconds = 0; //再重新取两个变量用来计数
setInterval(function(){
seconds ++;
if(seconds == 60) {
seconds = 0;
minutes ++;
}
secondsNode.value = seconds;
minutesNode.value = minutes;
if(minutes == 3){
clearInterval(timer); //计数到三分钟的时候停止
}
},10)
</script>
</html>