谈谈防抖和节流

防抖

高频触发事件，在规定时间内（比如5s）仅执行一次，该时间内再次触发重新计时，可以理解为触发一次事件的时间：time >= 5s;

// 高频事件 常见的dom的事件
const timer = null
const scrollAction = () => {
	clearTimeout(timer)
	timer = setTimeout(() => {
		// ...相关操作
	}, 5000)
}
dom.addEventListener('scroll', scrollAction)

节流

高频触发事件，在规定时间（5s）执行一次，该时间内触发的事件不再执行，直到5s后再执行：time = 5s（不考虑event loop引起的时间差）

const scrollCallback = (...args) => {
	console.log(args)
}
const scrollAction = (fn) => {
	let pending = false
	return (...args) => { // rest参数形式
		if (pending) return
		pending = true
		setTimeout(() => {
			// 要用argument必须写function
			// 箭头函数的作用域是上下文,不存在argument
			fn.apply(this, args)
			pending = false
		}, 5000)
	}
}
dom.addEventListener('scroll', scrollAction(scrollCallback))