跳至主要內容

vue2中使用lodash实现节流防抖

zfh原创大约 2 分钟约 482 字...

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

是什么

打个比方

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

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

  • 防抖:在事件被触发 n 秒后再执行回调,如果在这 n 秒内又被触发,则重新计时。
  • 节流:规定在一个单位时间内,只能触发一次函数。如果这个单位时间内触发多次函数,只有一次生效。

怎么用

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

看代码

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

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

防抖演示
防抖演示

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

节流演示
节流演示
上次编辑于:
本站勉强运行 小时
本站总访问量
網站計數器