定时器
文章目录
setInterval();
定时循环器。setInterval是window上的方法,所以不用定义,程序自己会去GO中找。
setInterval()演示
var time = 1000;
var i = 0;
setInterval(function () {
i ++;
console.log(i);
},time ); // 每隔1000毫秒执行一次
time = 2000; // 再给time赋值没用,只取第一次赋值的值
setInterval()的时间不精准
注意: setInterval的时间是很不精准的。
var time = 1000;
var firstTime = new Date().getTime();
setInterval(function () {
var lastTime = new Date().getTime();
console.log(lastTime - firstTime);
firstTime = lastTime; // 以便于下次再减(第二轮的开始时间就是第一轮的结束时间)
},time );
每一个setInterval()都有唯一标识
var timer = setInterval(function() {},1000);
var timer2 = setInterval(function() {},1000);
var timer3 = setInterval(function() {},1000);
setTimeout();
真正的定时器,意思是延迟多长时间之后再执行程序,并且只执行一次。
setTimeout(function() {
console.log('张杰很帅');
},1000);
clearInterval();
每一个setInterval()都有唯一标识
var timer = setInterval(function() {},1000);
var timer2 = setInterval(function() {},1000);
var timer3 = setInterval(function() {},1000);
按照唯一标识可以清除setInterval
var time = 1000;
var i = 0;
var time = setInterval(function () {
i ++;
console.log(i); // 打印停不下来
if(i > 3) {
clearInterval(time); // 给我停
}
},time );
打印到4是因为i++是先用后变,所以if判断的时候是3,打印的时候++了 所以是
clearTimeout();
清除定时任务
每一个setTimeout()都有唯一标识
var timer = setTimeout(function() {},1000);
var timer2 = setTimeout(function() {},1000);
var timer3 = setTimeout(function() {},1000);
按照唯一标识可以清除setTimeout
var timer = setTimeout(function() {
console.log('张杰很帅');
},1000);
clearTimeout(timer); // 清除定时任务
全局对象window上的方法,内部函数this指向window
setInterval()和setTimeout()的function的this都指向window,因为setInterval()和setTimeout()都是window上的方法
注意: setInterval(“fun.c()”,1000);
另一种展现形式(基本不用)
// 间隔1000毫秒执行引号中的代码。
var timer = setInterval("console.log('杰');",1000);
clearInterval(timer);
练习题
计时器,到三分钟停止!
<style>
input {
width: 100px;
border: 1px solid rgba(0, 0, 0, 0.8);
text-align: center;
font-size: 20px;
font-weight: bold;
}
label {
font-size: 20px;
font-weight: bold;
}
</style>
<body>
<span>
<label>minutes:</label>
<input type="text" value="0">
</span>
<span>
<label>seconds:</label>
<input type="text" value="0">
</span>
<script type="text/javascript">
var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0;
var seconds = 0;
var timer = setInterval(function() {
seconds ++;
if(seconds == 60) {
seconds = 0;
minutes ++;
}
secondsNode.value = seconds;
minutesNode.value = minutes;
if(minutes == 3) {
clearInterval(timer);
}
},1000)
</script>
</body>
ds;
minutesNode.value = minutes;
if(minutes == 3) {
clearInterval(timer);
}
},1000)
</script>
</body>