【JavaScript】防抖与节流的简单实现_防抖节流代码实现-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_51307413/article/details/126699842

1.防抖

在一段时间内允许多次触发函数，但是只在最后一次有效（执行）。如给定触发时间1000ms
如果在1000ms内没有再次触发事件，那么执行函数
如果在1000ms内再次触发函数，那么当前的计时取消，重新开始计时

		let timer = null;
		btn1.onclick = function () {
			if (timer !== null) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				console.log('防抖');
				timer = null;
			}, 1000);
		}

2.节流

如果短时间内大量触发同一事件，那么在函数执行一次之后，该函数在指定的时间期限内不在工作，直至过了这段时间才重新生效。如给定触发时间1000ms,在1000ms内，只能触发一次函数。

var mark = true;
		btn2.onclick = function () {
			if (mark) {
				setTimeout(() => {
					console.log('节流');
					mark = true;
				}, 1000)
			}
			mark = false;
		}

3.整体实现

<!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>防抖与节流</title>
</head>
<body>
    <button>测试防抖</button>
    <button>测试节流</button>
</body>
<script>
//防抖：在一段时间内允许多次触发函数，但是只在最后一次有效（执行）
        let btn1 = document.getElementsByTagName('button')[0];
        let btn2 = document.getElementsByTagName('button')[1];
		let timer = null;
		btn1.onclick = function () {
			if (timer !== null) {
				clearTimeout(timer);
			}
			timer = setTimeout(() => {
				console.log('防抖');
				timer = null;
			}, 1000);
		}

//节流：在一段时间内，只能触发一次函数。
		var mark = true;
		btn2.onclick = function () {
			if (mark) {
				setTimeout(() => {
					console.log('节流');
					mark = true;
				}, 1000)
			}
			mark = false;
		}

</script>
</html>