談談防抖和節流

防抖

高頻觸發事件，在規定時間內（比如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))