节流

一、什么是节流？

节流是在一段时间间隔t中，多次触发相同的事件，事件只执行一次，并且执行的事件和下一次事件时间相隔t

二、场景

2.1 鼠标移动，使用节流限制移动时间的触发频率，避免过多的计算个页面渲染

2.2 滚动事件，用户触发滚动scroll事件，可以使用节流来减少执行次数

let fater = document.querySelector(".father")
let timer = null
fater.addEventListener("scroll", () => {
	if (timer) {
		return
	}
	timer = setTimeout(() => {
		console.log("节流")
		timer = null
	}, 1000)
})

if (null) {
	console.log(111)
} else {
	console.log(222)
}

三、封装

function debounce(fn, timeout) {
	let timer = null
	return function () {
		if (timer) return
		timer = setTimeout(() => {
			fn()
		}, timeout)
	}
}