防抖: 在规定时间后执行函数,若执行前再次触发则刷新计时器
举例: 鼠标移出弹出菜单后菜单一秒后消失,若鼠标再次移入则继续显示直到离开时再计时防止闪烁抖动
节流:在固定时间内只能执行一次该函数
举例:商品页面滚动到底部获取新的一页数据,在一秒内只获取一次以达到节省流量
节流与防抖函数
均为接受两个参数,第一个参数为防抖节流的函数,第二个参数调节时间 (默认时间为1000)
//防抖回调 默认一秒
export function debounce(func, wait = 1000){
let timer = null;
return () => {
if (timer !== null) {
clearTimeout(timer)
}
timer = setTimeout(func, wait)
}
}
//节流回调 默认一秒
export function throttle(func, wait = 1000){
let lastTime = 0;
return () => {
const nowTime = Date.now();
if (nowTime - lastTime > wait) {
func.call("", lastTime);
lastTime = nowTime;
}
}
}