1、手动实现防抖
防抖: 对于频繁触发事件,只在最后一次触发生效
// 非立即防抖:持续触发事件时,事件处理函数完全不执行,等最后一次触发结束一段时间后再执行
// 实现思路:每次触发事件时都取消之前的延时调用方法,并重设定时器
function debounce(wait, funct, ...args) {
var timer = null
return () => {
clearTimeout(timer)
timer = setTimeout(() => funct(...args), wait)
}
}
// 立即防抖:持续触发事件时,事件处理函数会立即执行,然后不执行事件处理函数,直至最后一次
// 触发之后的一段时间后才允许再次执行事件处理函数
// 实现思路:判断是否有定时器,没有则执行事件处理函数,然后无论是否有定时器都需重设定时器
function debounce(wait, funct, ...args) {
var timer = null
return () => {
if(!timer) funct(...args)
clearTimeout(timer)
timer = setTimeout(() => timer = null, wait)
}
}
window.onscroll = debounce(300, (a) => console.log(a), 1)
2、手动实现节流
节流:把频繁触发事件变为少量触发
//时间戳实现:通过时间戳记录上次