vue2中使用lodash实现节流防抖

说说节流和防抖

这两个概念在前端开发中是老生常谈，对于我来说这两个概念记了又忘，忘了又看。过的时间又忘记。写业务需要优化一些功能，这两个概念又被提了出来，这次就好好梳理一下

解释

::: tip 打个比方

防抖就类似回城，打断就得重新回。

节流就类似技能需要冷却时间到了才能用。

:::

• 防抖:在事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时。

• 节流:规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。

• 函数防抖和函数节流都是防止某一时间频繁触发，但是这两兄弟之间的原理却不一样。节流防抖就好比乘电梯，比如delay是10秒，防抖就是电梯每进来一个人就要等10秒再运行，而节流就是电梯保证每10秒可以运行一次

结合应用场景

• 防抖
  • search搜索联想，用户在不断输入值时，用防抖来节约请求资源
  • window触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一次
• 节流
  • 鼠标不断点击触发，mousedown(单位时间内只触发一次)
  • 监听滚动事件，比如是否滑到底部自动加载更多，用throttle来判断

造个轮子

// TODO 手写防抖 节流

使用lodash

造什么轮子？lodash写的不好？

  methods: {
    // 防抖 a,b是调用xxxxx方法的参数
   xxxxx:_.debounce(function (a,b) {
      // ... 你的逻辑
    },2000),
     // 节流 
    xxxxxxx:_.throttle(function (a,b) {
      //... 你的逻辑
    },2000),
  },

如下图，我们不断输入，在停止输入2秒后，向页面上显示的数组推入一则消息。

防抖演示

而节流是在开始输入时触发1次，然后每隔2s触发一次事件，这中间的输入不会触发事件。

节流演示