Vue 刷新频繁的防抖函数处理

最新推荐文章于 2024-08-07 10:17:22 发布

天行哥哥

最新推荐文章于 2024-08-07 10:17:22 发布

阅读量616

点赞数

分类专栏： web前端文章标签： vue javascript 防抖

本文链接：https://blog.csdn.net/txz_gray/article/details/107410415

版权

web前端专栏收录该内容

3 篇文章 0 订阅

订阅专栏

频繁的刷新或搜索时频繁请求都是不必要的且影响性能，这时就需要添加防抖函数间隔一段时间再刷新。

const refresh = this.debounce(this.$refs.homeScrollView.refresh, 50);
// 以下监听函数会频繁调用
this.$bus.$on('itemImageLoad', () => {
  refresh();
})

//防抖函数
debounce(func, delay) {
  let timer = null;
  return function (...args) {
    if (timer) clearTimeout(timer);
    timer = setTimeout(() => {
      func.apply(this, args);
    }, delay)
  }
},

将refresh函数传入到debounce函数中去，生成一个新的函数；

只有在调用非常频繁的时候，就使用新生成的函数；

而新生成的函数并不会非常频繁的执行，如果下一次执行来的非常快，那会将上一次的取消掉。