关于防抖debounce和节流throttle

最近又用到了防抖和节流这两个方法，平时都是直接调用的方法 也没太注意实现的原理 今天就好好的了解一下！！

首先防抖 中有三个类型 分别是 规定时间内点击最后一次结束时才触发、点击第一次就触发，规定时间内不再触发、以及根据传入是否立即执行来进行触发，

首先是非立即执行的版本

function debounce(fn,time){ let time = time || 500; let timeout; return function(){ let that = this; let arg = arguments; if(timeout){ clearTimeout(timeout) } timeout = setTimeout(()=>{ timeout = null; fn.apply(that,arg) }) } }

其次是立即执行的版本

function debounce(fn,time){ let time = time || 500; let timeout; return function(){ let that = this; let arg = arguments; if(timeout){ clearTimeout(timeout) } let callNow = !timeout; timeout = setTimeout(() => { timeout = null; }, wait) if (callNow) func.apply(that, arg) } }

然后是最终版本的代码

// 防抖 /** * @desc 函数防抖 * @param fn 函数 * @param time延迟执行毫秒数 * @param immediately true 表立即执行，false 表非立即执行 */ function debounce(fn,time,immediately){ let time = time || 500; let timeout; return function(){ let that = this; let arg = arguments; if(timeout){clearTimeout(timeout)} if(immediately){ let now = !timeout; timeout = setTimeout(()=>{ timeout = null; },time) if(now){fn.apply(that,arg)} }else{ timeout = setTimeout(()=>{ timeout = null; fn.apply(that,arg) },time) } } }

下面讲的是节流

节流（throttle）

所谓节流，就是指连续触发事件但是在 n 秒中只执行一次函数。节流会稀释函数的执行频率。

对于节流，一般有两种方式可以实现，分别是时间戳版和定时器版。

时间戳版：

function throttle(func, wait) { let previous = 0; return function() { let now = Date.now(); let context = this; let args = arguments; if (now - previous > wait) { func.apply(context, args); previous = now; } } }

定时器版:

 

function throttle(func, wait) { let timeout; return function() { let context = this; let args = arguments; if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } }

双剑合璧版:

 

/** * @desc 函数节流 * @param func 函数 * @param wait 延迟执行毫秒数 * @param type 1 表时间戳版，2 表定时器版 */ function throttle(func, wait ,type) { let previous,timeout; if(type===1){ previous = 0; }else if(type===2){ timeout; } return function() { let context = this; let args = arguments; if(type===1){ let now = Date.now(); if (now - previous > wait) { func.apply(context, args); previous = now; } }else if(type===2){ if (!timeout) { timeout = setTimeout(() => { timeout = null; func.apply(context, args) }, wait) } } } }