Gridea

防抖

触发事件后，在n秒内，事件只执行一次，如果在n秒内又触发了事件，则会重新计算函数的执行时间。

比如点击按钮，规定了2秒的间隔时间，结果在1.5秒的时候又点了，则会重新计算2秒的时间，必须等待2秒后点击才会生效。
应用场景举例：下拉触底加载下一页。
代码示例：

<script>
	let count = 0, time = null, interval = 2000
	
	document.querySelector('body').onclick = () => {
		if (!time || new Date() - time >= interval) {
			count++
			console.log(`点击了${count}次`)
		}
		time = new Date()
	}
</script>

节流

连续发生的事件在n秒内，只执行一次。

比如某个按钮在3秒内被点击了数次，但只会执行一次。
应用场景举例：搜索查询（按钮）、获取短信验证码
代码示例：

<script>
	let count = 0, time = null, interval = 3000
	
	document.querySelector('body').onclick = () => {
		if (!time || new Date() - time >= interval) {
			time = new Date()
			count++
			console.log(`点击了${count}次`)
		}
	}
</script>21

上文中的示例代码可以直接复制到浏览器控制台查看效果