浅识防抖与节流防抖说人话：防止用户手抖或故意频繁点击向服务器发送请求，减轻服务器压力。原理：当一个事件触发（如点击）

防抖

说人话：防止用户手抖或故意频繁点击向服务器发送请求，减轻服务器压力。

原理：当一个事件触发（如点击），在单位时间内，重复点击会覆盖掉前面的点击效果，只会触发最后一次点击事件

实例代码：

<body>
	<button>按钮</button>
	<script>
		let timeID
		document.querySelector('button').onclick = function () {
			clearTimeout(timeID)
			timeID = setTimeout(function () {
				console.log(111)
			}, 1000)
		}
	</script>
</body>

效果如下：

节流

说人话：为减轻服务器压力，可利用开关思想，在用户第一次点击后，在单位事件内将点击事件关闭。

原理：当一个事件触发（如点击），在单位时间内，重复点击，只会触发第一次点击事件

实例代码：

<body>
	<button>按钮</button>
	<script>
		let bol = true
		document.querySelector('button').onclick = function () {
			if (!bol) {
				return
			}
			bol = false
			setTimeout(function () {
				console.log(111)
				bol = true
			}, 2000)
		}
	</script>
</body>