js防抖与节流与方法封装

应用场景1、节流(Throttle)多次触发固定时间间隔内只执行一次。应用场景比如窗口调整、页面滚动、抢购和疯狂点击等会用到节流。比如水龙头不管开多久单位时间内流出的水是固定的。时机周期性地执行截流原理在固定时间间隔内只执行一次回调不管这段时间触发了多少次只有第一次(或每间隔到期时)的执行有效其余触发都被忽略或延迟到下一个周期。2、防抖(Debounce)多次触发变为最后一次触发后等待N秒后执行比如百度搜索就应该用防抖当我连续不断输入时不会发送请求当我一段时间内不输入了才会发送一次请求如果小于这段时间继续输入的话时间会重新计算也不会发送请求。时机停止触发后才执行。应用场景搜索联想、表单校验、窗口resize后重新计算。比如电梯有人进来就重置关门计时直到没人进来才关门。防抖核心原理每当触发事件就清掉之前的定时器重新设置一个定时器只有事件停止触发且等待时间到了才执行回调。3、总结防抖是 “停下来才执行” 截流时 ”每隔一段时间执行一次“。deTh.js /** * 闭包函数 * * 防抖对于短时间内连续触发的事件滚动事件、表单重复提交、页面resize事件常见于需要做页面适配的时候让某个时间期限内事件处理函数只执行一次。 * 节流对于短时间内大量触发同一事件滚动事件、输入框实时搜索那么在函数执行一次之后该函数在指定的时间期限内不再工作直至过了这段时间才重新生效 */ export default { // 防抖 debounce: function (fn, delay) { // 时间期限 var delay delay || 200; var timer; // 闭包 return function () { // 考虑作用域上下文环境apply需要用到this对象 var th this; // 接收的参数用 ES6 中的 rest 参数统一存储到变量 args 中。arguments就是传入的参数数组,而且个数可以不确定的传回给fn不确定函数到底有多少个参数用arguments来接收 var args arguments; // 判断还在定时说明当前正在一个计时过程中并且又触发了相同事件。所以要取消当前的计时重新开始计时 if (timer) { clearTimeout(timer); } timer setTimeout(function () { timer null; // 执行方法 fn.apply(th, args); }, delay); }; }, // 节流 定时器 时间戳 throttle: function(func, delay) { var timer null var startTime Date.now() return function() { // 结束时间 var curTime Date.now() // 间隔时间 延迟的时间 - 结束时间戳 - 开始时间戳 var interval delay - (curTime - startTime) var th this var args arguments clearTimeout(timer) if(interval 0) { // 证明可以触发了 func.apply(th, args) // 重新计算开始时间 startTime Date.now() } else { // 继续等待 timer setTimeout(func, interval) } } } }4、TS泛型版防抖// 泛型让防抖支持任意参数类型和返回值 type Fn (...args: any[]) any; interface DebouncedFunctionT extends Fn { (...args: ParametersT): void; cancel: () void; flush: () void; } function debounceT extends Fn( fn: T, wait 300, leading false ): DebouncedFunctionT { let timer: ReturnTypetypeof setTimeout | null null; const debounced function (this: any, ...args: ParametersT) { const invoke () fn.apply(this, args); if (timer) clearTimeout(timer); if (leading timer null) { invoke(); timer setTimeout(() { timer null; }, wait); return; } timer setTimeout(() { invoke(); timer null; }, wait); } as DebouncedFunctionT; debounced.cancel function () { if (timer) clearTimeout(timer); timer null; }; debounced.flush function () { if (timer) { clearTimeout(timer); debounced(); } }; return debounced; }5、TS泛型版截流type Fn (...args: any[]) any; function throttleT extends Fn( fn: T, wait 300, options: { leading?: boolean; trailing?: boolean } {} ) { const { leading true, trailing true } options; let timer: ReturnTypetypeof setTimeout | null null; let lastTime 0; return function (this: any, ...args: ParametersT) { const now Date.now(); if (!leading lastTime 0) lastTime now; if (now - lastTime wait) { if (timer) { clearTimeout(timer); timer null; } fn.apply(this, args); lastTime now; return; } if (!timer trailing) { const remain wait - (now - lastTime); timer setTimeout(() { fn.apply(this, args); lastTime Date.now(); timer null; }, remain); } }; }