15、计时器方法1（setInterval、clearInterval）

jasmine_qiqi

已于 2022-04-09 16:27:17 修改

阅读量1.1k

点赞数 1

分类专栏： JS 文章标签： javascript 前端

于 2022-04-09 13:56:10 首次发布

本文链接：https://blog.csdn.net/weixin_45065754/article/details/124059525

版权

JS 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

计时器方法（setInterval、setTimeout）

计时器方法
设置计时器（每n秒输出）	`setInterval`
取消计时器	`clearInterval`
设置计时器（n秒后输出）	`setTimeout`
取消计时器	`clearTimeout`

2、创建计时器（`setInterval`）

		// 1、setInterval：计时器
		var timer = setInterval(() => {
			console.log('Hello world!');
		}, 2000)

3、取消计时器（`clearInterval`）

		// 2、clearInterval：暂停计时器
		var btn = document.querySelector('.case1 button');
		btn.onclick = function () {
			clearInterval(timer);
		}

4、计时器显示时针(`setInterval`)

		// 3、计时器显示时针：setInterval
		var h1 = document.querySelector('.case2 h1');
		setInterval(() => {
			let time = new Date();
			let hours = time.getHours();
			let minutes = time.getMinutes();
			let seconds = time.getSeconds();
			let timeNow = `${hours}:${minutes}:${seconds}`;
			h1.innerHTML = timeNow;
		}, 1000);

5、计时器显示时间（开始、暂停、结束）

// 4、时间（开始、暂停、结束）
		var timer1 = document.querySelector('.case3 h1');
		var start = document.querySelector('.case3 .start');
		var pause = document.querySelector('.case3 .pause');
		var stop = document.querySelector('.case3 .end');
		var seconds = 0;
		var ms = 0;
		// 显示时间
		timer1.innerHTML = `${seconds}:${ms}`;
		// 计时器
		var timer2 = null;

		// 4.1、开始计时器
		start.onclick = function () {
			// 先清空计时器
			clearInterval(timer2);
			// 设置计时器
			timer2 = setInterval(() => {
				if (ms === 9) {
					++seconds;
					ms = 0;
				}
				++ms;
				timer1.innerHTML = `${seconds}:${ms}`;
			}, 100)
		}

		// 4.2、暂停计时器
		pause.onclick = function () {
			clearInterval(timer2);
		}

		// 4.3、结束计时器
		stop.onclick = function () {
			seconds = 0;
			ms = 0;
			timer1.innerHTML = `${seconds}:${ms}`;
		}

7、源代码

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>

<body>

	<!-- 1-2、计时器 -->
	<div class="case1">
		<button>暂停计时器</button>
	</div>
	<!-- 3、时针 -->
	<div class="case2">
		<h1>时针</h1>
	</div>

	<!-- 4、时间（开始、暂停、结束） -->
	<div class="case3">
		<h1>时针</h1>
		<button class="start">开始</button>
		<button class="pause">暂停</button>
		<button class="end">结束</button>
	</div>
	<script>
		// 1、setInterval：计时器
		var timer = setInterval(() => {
			console.log('Hello world!');
		}, 2000)

		// 2、clearInterval：暂停计时器
		var btn = document.querySelector('.case1 button');
		btn.onclick = function () {
			clearInterval(timer);
		}

		// 3、计时器显示时针：setInterval
		var h1 = document.querySelector('.case2 h1');
		setInterval(() => {
			let time = new Date();
			let hours = time.getHours();
			let minutes = time.getMinutes();
			let seconds = time.getSeconds();
			let timeNow = `${hours}:${minutes}:${seconds}`;
			h1.innerHTML = timeNow;
		}, 1000);

		// 4、时间（开始、暂停、结束）
		var timer1 = document.querySelector('.case3 h1');
		var start = document.querySelector('.case3 .start');
		var pause = document.querySelector('.case3 .pause');
		var stop = document.querySelector('.case3 .end');
		var seconds = 0;
		var ms = 0;
		// 显示时间
		timer1.innerHTML = `${seconds}:${ms}`;
		// 计时器
		var timer2 = null;

		// 4.1、开始计时器
		start.onclick = function () {
			// 先清空计时器
			clearInterval(timer2);
			// 设置计时器
			timer2 = setInterval(() => {
				if (ms === 9) {
					++seconds;
					ms = 0;
				}
				++ms;
				timer1.innerHTML = `${seconds}:${ms}`;
			}, 100)
		}

		// 4.2、暂停计时器
		pause.onclick = function () {
			clearInterval(timer2);
		}

		// 4.3、结束计时器
		stop.onclick = function () {
			seconds = 0;
			ms = 0;
			timer1.innerHTML = `${seconds}:${ms}`;
		}
		
		// 5、节流：每隔1秒执行一次(setInterval)
		var timer = null;
		window.onscroll = function () {
			// 先清空计时器，防止计时器叠加
			clearInterval(timer);
			timer = setInterval(() => {
				console.log('节流');
			}, 1000);
		}
	</script>
</body>

</html>