【原生 JS】函数防抖与函数节流

函数防抖：在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。
函数节流：每隔一段时间，只执行一次函数。

相同点：
1.目的都是，都是为了限制函数的执行频次，节省计算资源。
2.都是通过使用 setTimeout 实现。

不同点：
1.函数防抖关注一定时间连续触发的事件只在最后执行一次，而函数节流侧重于一段时间内只执行一次。

防抖典型场景：文本框输入搜索（连续输入时避免多次请求接口）
节流典型场景：防止按钮重复点击，表单重复提交。

防抖vue中使用：

1.在utils.js文件写防抖方法

export const debounce = (fn, delay) => {
  // 记录上一次的延时器
  let timer = null
  delay = delay || 200
  return function () {
    const args = arguments
    const that = this
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function () {
      fn.apply(that, args)
    }, delay)
  }
}

2.在vue组件中引入

import { fmoney, debounce } from '@/config/utils.js'

3.在组件中使用

<div class="wrap" @mousedown="handleClick">

handleClick: debounce(function (e) {
  this.handleClick_(e)
}, 50)

个人理解：
防抖：用户做了一个操作，不马上执行相应的函数，等待一段时间，如果用户在这段时间都没有相同操作，就执行相应的函数。
节流：技能CD。用户做了一个操作，执行相应的函数，并且把一个变量标记为false，一段时间后，再标记为true，只有变为true时，再操作才有效。

参考文章：
1、https://www.jianshu.com/p/b7b698db8352
2、https://www.cnblogs.com/fozero/p/11107606.html
3、https://juejin.im/entry/6844903466427482120