16、计时器方法2（setTimeout、clearTimeout、防抖、节流）

jasmine_qiqi

已于 2022-04-09 16:31:54 修改

阅读量634

点赞数

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

于 2022-04-09 14:01:35 首次发布

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

版权

JS 专栏收录该内容

26 篇文章 3 订阅

订阅专栏

1、计时器（2秒后输出）：`setTimeout`

		// 1、计时器（2秒后输出）：setTimeout
		var time = null;
		timer = setTimeout(() => {
			console.log('Hello world!');
		}, 2000);

2、取消计时器：`clearTimeout`

		// 2、取消计时器：clearTimeout
		var btn = document.querySelector('button');
		btn.onclick = function () {
			clearTimeout(timer);
		}

3、三秒后跳转到阿里（`location.href`）

		// 3、三秒后跳转到阿里
		setTimeout(() => {
			location.href = 'https://www.iconfont.cn/';
		}, 3000);

4、防抖：防止事件抖动，重新输入，1秒后只执行一次

		// 4、防抖：防止事件抖动，重新输入1秒后只执行一次(setTimeout)
		var timer = null;
		// 网页滑动：onscroll
		window.onscroll = function () {
			if (timer !== null) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				console.log('防抖');
				timer = null;
			}, 1000);
		}

5、节流：输入时，每隔1秒执行一次

		// 5、节流：每隔1秒执行一次(setInterval)
		var mark = true;
		window.onscroll = function () {
			if (mark) {
				setTimeout(() => {
					console.log('节流');
					mark = true;
				}, 1000)
			}
			mark = false;
		}

6、源代码

<!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>
	<style>
		body {
			height: 2000px;
		}
	</style>
</head>

<body>
	<!-- 2、取消计时器 -->
	<button>停止按钮</button>

	<script>
		// 1、计时器（2秒后输出）：setTimeout
		var time = null;
		timer = setTimeout(() => {
			console.log('Hello world!');
		}, 2000);

		// 2、取消计时器：clearTimeout
		var btn = document.querySelector('button');
		btn.onclick = function () {
			clearTimeout(timer);
		}

		// 3、三秒后跳转到阿里
		// setTimeout(() => {
		// 	location.href = 'https://www.iconfont.cn/';
		// }, 3000);

		// 4、防抖：防止事件抖动，重新输入1秒后只执行一次(setTimeout)
		var timer = null;
		// 网页滑动：onscroll
		window.onscroll = function () {
			if (timer !== null) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				console.log('防抖');
				timer = null;
			}, 1000);
		}
	</script>
</body>

</html>