【JavaScript】防抖与节流的简单实现

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>

你可能感兴趣的:(web,javascript,前端,开发语言)