定时器

最新推荐文章于 2023-01-12 11:35:37 发布

竹节虫T

最新推荐文章于 2023-01-12 11:35:37 发布

阅读量213

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/weixin_43623871/article/details/88866673

版权

前端专栏收录该内容

61 篇文章 0 订阅

订阅专栏

文章目录

setInterval

循环定时器,每隔多少毫秒一直执行这个函数

1,
setInterval(function() {},10);
//每隔10毫秒一直执行这个函数（循环定时器）

2,
var time = 1000;
setInterval(function() {},time);
time = 2000;
它是首先识别time为 1000，它只识别一次，然后一直执行函数，后来改变time就没用了

3,
setInterval是非常不准的。
setInterval底层是基于红黑树的

window.setInterval，它是window上的，里面函数的this指向window
4，
var timer = setInterval(function () {}, 1000);
var timer2 = setInterval(function () {}, 1000);
console.log(timer)//1
console.log(timer2)//2

setInterval有返回值，它会返回数字就是第几个定时器，作为它的唯一标识

clearInterval(timer)，那么清除定时器的时候它会利用唯一标识;
var timer = setInterval(function () {
	//想让它停止就加上
	clearInterval(timer);
}, 1000);

setTimeout

setTimeout推迟多少毫秒再执行前面的函数，并且只执行一次


var time =  setTimeout(function () {}, 1000)

clearTimeOut(time);

全是window上的方法，里面函数的this都指向window
setInterval("conso.log('a')", 1000)它们有另外的一种特殊的形式，把字符串里面的内容当做js代码在执行

案例

设置一个三分钟的计时器

<html>
<head>
	<meta http-equiv="Content-type" content="text/html; charset=utf-8">
	<style text = "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">

<script>
var minutesNode = document.getElementsByTagName('input')[0];
var secondsNode = document.getElementsByTagName('input')[1];
var minutes = 0;
var seconds = 0;
var time = setInterval(function () {
	seconds++;
	if(seconds == 60) {
		seconds = 0;
		minutes++;
	}
	secondsNode.value = seconds;
	minutesNode.value = minutes;
	
	if(minutes == 3){
		clearInterval(time);
	}
	
}, 1000);

</script>   
</body>
</html>