JS 防抖和节流（节流常用方式及控制第一次和最后一次触发）

防抖和节流（节流常用方式及控制第一次和最后一次触发）"/>

JS 防抖和节流（节流常用方式及控制第一次和最后一次触发）

简单叙述一下防抖和节流的概念

防抖：事件连续多次触发只执行最后一次
节流：事件连续多次触发在单位时间内触发一次（触发多次）

经典案例：
浏览器滚动事件
防抖对应 ：当鼠标一直在滚动时 停止的时候触发（触发一次）
节流对应：当鼠标一直在滚动时 每隔单位时间触发（触发多次）

防抖实现

    //防抖function debounce(fn, wait) {let timer = null;return function () {if (timer) clearTimeout(timer)timer = setTimeout(fn, wait);}

节流实现
常用两种实现方式 时间戳实现、定时器实现。但这两种都存在弊端
第一次时（刚开始事件） 时间戳会在立马就触发 定时器则过单位时间触发
最后一次时（刚结束事件） 时间戳立马停止触发 定时器则过单位时间触发
所以可以结合两者不同 控制最后一次和第一次是否触发

    //节流 定时器 (最后一次也触发)function throttle1(fn, wait) {let timer = null;return function () {if (!timer) {timer = setTimeout(() => {timer = null;fn()}, wait);}}}//节流 时间戳 (第一次就触发)function throttle2(fn, wait) {let pre = 0;return function () {let now = Date.now()if (now - pre > wait) {fn()pre = now}}}//节流 控制最后一次和第一次function throttle3(fn, wait, op = {}) {let timer = null;let pre = 0;return function () {let now = Date.now();if (now - pre > wait) {if (pre == 0 && !op.bengin) {pre = nowreturn}if (timer) {clearTimeout(timer)timer = null}fn()pre = now} else if (!timer && op.end) {timer = setTimeout(() => {fn();timer = null}, wait)}}}