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)
     }
   }
 }
}