定时器使用

最新推荐文章于 2024-08-09 16:53:07 发布

no_name_sky

最新推荐文章于 2024-08-09 16:53:07 发布

阅读量359

点赞数

分类专栏： js javascript 文章标签： javascript

本文链接：https://blog.csdn.net/no_name_sky/article/details/118405717

版权

js 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

javascript

3 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的一次性定时器setTimeout和周期性循环定时器setInterval的使用。setTimeout用于在指定延迟后执行一次回调函数，常用于解决数据请求的阻塞问题。而setInterval则会定期执行回调函数，可用于实现动画效果。同时，文章强调了手动清除定时器如clearInterval和clearTimeout的重要性，以避免内存占用。

摘要由CSDN通过智能技术生成

一次性定时器：setTimeout(fn,1000ms)，多长时间后只执行一次回调函数。
周期性循环定时器：setInterval(fn回调函数，1000ms)，每隔多长事件执行一次回调函数。

一次性定时器

如果未来数据的请求出现数据阻塞的问题，可以考虑使用setTimeout()来执行异步操作，数据交互时使用非常频繁。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<script>
	console.log("开始");
	// 一次性定时器，2s之后执行回调函数
	// 如果console.log('嘿嘿嘿')先调用了，证明setTimeout可以做异步操作。
	setTimeout(function(){
		console.log('我来了')
	}, 2000)
	console.log('嘿嘿嘿');
</script>

</body>
</html>

效果:
在这里插入图片描述

周期性循环定时器

可以对标签进行动画效果。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<script>
	var a = 0;
	setInterval(function(){
		a++;
		console.log(a);
	},1000)
</script>

</body>
</html>

清除定时器

js中是有垃圾回收机制的，但是定时器它不管，需要我们手动的清除定时器在缓存中的占用。
clearInterval()
clearTimeout()
用定时器的时候先清除定时器，页面不会出现问题。

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
<button id="clear">清除定时器</button>
<script>
	var a = 0;
	var timer = setInterval(function(){
		a++;
		console.log(a);
	},1000)
	var oClear = document.getElementById('clear');
	oClear.onclick = function(){
		// 点击button按钮清除定时器
		clearInterval(timer);
	}
</script>

</body>
</html>