防抖:当持续触发事件时,一定时间段内没有再触发事件,事件处理函数才会执行一次。如果设定的时间到来之前,又一次触发了事件,就重新开始延迟
/** * 函数防抖模块 * 使用场景 搜索联想,window触发resize的时候,防止重复提交 * @param Function func 触发的事件 * @param Number delay 延迟时间 * @param Boolean flag 防抖效果后防抖 false 先防抖 true * * */ export function debounce(func, delay, flag) { let timer; return () => { clearTimeout(timer); if (flag) { let bl = !timer; timer = setTimeout(() => { timer = null; }, delay); if (bl) { func(); } } else { timer = setTimeout(() => { func(); }, delay); } }; }
节流:当持续触发事件时,保证一定时间段内只调用一次事件处理函数(例如:尿不尽)
/** * 函数节流模块 * @param func 触发的事件 * @param delay 延迟时间 */ export function throttle(func, wait) { let previous = 0; return () => { let now = +new Date(); if (now - previous > wait) { func(); previous = now; } }; }