vue 防抖与节流

什么是防抖节流

函数防抖（debounce） 是指在一定时间内，在动作被连续频繁触发的情况下，动作只会被执行一次，也就是说当调用动作过n毫秒后，才会执行该动作，若在这n毫秒内又调用此动作则将重新计算执行时间，所以短时间内的连续动作永远只会触发一次。

函数节流（throttle） 是指一定时间内执行的操作只执行一次，也就是说即预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期，一个比较形象的例子是如果将水龙头拧紧直到水是以水滴的形式流出，那你会发现每隔一段时间，就会有一滴水流出。

函数节流（throttle）与 函数防抖（debounce）都是为了限制函数的执行频次，以优化函数触发频率过高导致的响应速度跟不上触发频率，出现延迟，假死或卡顿的现象。

防抖

/**
 *  防抖
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 */
let timeout
export function debounce(func, wait = 300, immediate = false) {
  //  移除定时器
  if (timeout !== null) {
    clearTimeout(timeout)
  }
  //  是否立即执行
  if (immediate) {
    //  立即执行
    const callNow = !timeout
    timeout = setTimeout(() => {
      timeout = null
    }, wait)
    if (callNow) typeof func === 'function' && func()
  } else {
    //  设置定时器，当最后一次操作后，timeout不会再被清除，所以在延时wait毫秒后执行func回调方法
    timeout = setTimeout(() => {
      typeof func === 'function' && func()
    }, wait)
  }
}

节流

/**
 * 节流
 * @param {Function} func 要执行的回调函数
 * @param {Number} wait 延时的时间
 * @param {Boolean} immediate 是否立即执行
 */
let timer, flag
export function throttle(func, wait = 3000, immediate = true) {
  //  是否立即执行
  if (immediate) {
    //  立即执行
    if (!flag) {
      flag = true
      typeof func === 'function' && func()
      timer = setTimeout(() => {
        flag = false
      }, wait)
    }
  } else {
    if (!flag) {
      flag = true
      timer = setTimeout(() => {
        flag = false
        typeof func === 'function' && func()
      }, wait)
    }
  }
}

使用

在需要使用的.vue中引入

import { debounce, throttle } from '@/utils/tool'

执行

//
handle() {
  debounce(() => {
    console.log('------ 防抖 ------')
  })
  throttle(() => {
    console.log('------ 节流 ------')
  })
}

防抖：触发高频事件后n秒内函数只会执行一次，如果n秒内高频事件再次被触发，则重新计算时间。
应用：因为防抖的特性，一直执行最后一次的触发，所以可以用于鼠标移动确定最后一次移动的时候的坐标位置。
输入框的模糊搜索
节流：高频事件触发，但在n秒内只会执行一次，所以节流会稀释函数的执行频率
应用：因为节流是监听到第一次触发事件后就执行，所以可以用来防止按钮多次点击执行多次，且按照第一次点击的事件为准。

原文链接：https://blog.csdn.net/weixin_44875693/article/details/124139905
原文链接：https://blog.csdn.net/weixin_44980732/article/details/116020069