js防抖与节流

防抖

所谓防抖，是指触发事件后 n 如果在秒内只执行一次函数， n 如果事件在几秒钟内再次触发，函数执行时间将被重新计算。简而言之，防抖类似于返回城市，中断必须返回。

代码实现

/**  * @desc 函数防抖  * @param fn 函数  * @param wait 毫秒延迟执行  * @param immediate true 立即执行，false 非立即执行表格  */  const debounce = function (fn, wait, immediate = false) {   let timer = null   return function () {     let context = this     let args = arguments      if (timer) {       // 触发事件后，函数只能在n秒内执行一次。如果函数在n秒内再次触发，函数执行事件将被重新计算       clearTimeout(timer)    }     if (immediate) {       // 立即执行版本       let callNow = !timer       if (callNow) {         fn.apply(context, args)      }       timer = setTimeout(() => {         timer = null      }, wait)    } else {       timer = setTimeout(() => {         fn.apply(context, args)      }, wait)    }  } }

节流

所谓节流，是指连续触发事件但在 n 秒中只执行一次函数。节流会稀释函数的执行频率。简而言之，节流就类似技能需要冷却时间到了才能用。

代码实现

/**  * @desc 函数节流  * @param fn 函数  * @param wait 毫秒延迟执行  * @param type 1 表时间戳版，2 表定时器版  */  const throttle = function (fn, wait, type) {   if (type === 1) {     let preTime = 0     return function () {       let context = this       let args = arguments       let nowTime = new Date()       if (nowTime - preTime > wait) {         preTime = nowTime         fn.apply(context, args)      }    }  } else {     let timer = null     return function () {       let context = this       let args = arguments       if (!timer) {         // 延迟时间结束后，执行函数         timer = setTimeout(() => {           timer = null           fn.apply(context, args)        }, wait)      }    }  } }