防抖(debounce)节流(throttle)介绍和运用

防抖

在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时；典型案例就是输入搜索；输入结束后n秒才进行搜索请求，n秒内又输入了内容，就重新计时。

节流

规定在一个单位时间内，只能触发一次函数，如果宰割单位时间内触发多次函数，只有一次生效；典型案例就是 鼠标不断点击触发，规定在n秒内多次点击只有一次生效。

区别

防抖动是将多次执行变为最后一次执行，节流是将多次执行变成每隔一段时间执行。

代码

const count = ref(0)
const count_two = ref(0)
const debounceClick = debounce(() => {
  console.log('ddddd')
  count.value++
}, 1000, true)

const throttleClick = throttle(() => {
  count_two.value++
}, 1000, false)
/**
 * 防抖
 * im 是否立即执行
 * t 时间
 * */
function debounce (f, t, im = false) {

  let timer, flag = true;
  return (...args) => {
    // 需要立即执行的情况
    if (im) {
      if (flag) {
        f(...args);
        flag = false;
      } else {
        clearTimeout(timer);
        timer = setTimeout(() => {
          f(...args);
          flag = true
        }, t)
      }
    } else {
      // 非立即执行的情况
      clearTimeout(timer);
      timer = setTimeout(() => {
        f(...args)
      }, t)
    }
  }
}
/**
 * 节流
 * im 是否立即执行
 * t 时间
 * */
function throttle (f, t, im = false) {
  let flag = true;
  return (...args) => {
    if (flag) {
      flag = false
      im && f(...args)
      setTimeout(() => {
        !im && f(...args)
        flag = true
      }, t)
    }
  }
}

参考：https://juejin.cn/post/6966902934789423118