跳至主要內容

vue2中使用lodash实现节流防抖

Mr.Chen原创开发笔记Vue2lodashvue2大约 2 分钟约 612 字

说说节流和防抖

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

解释

::: 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触发一次事件,这中间的输入不会触发事件。

节流演示
节流演示
上次编辑于: