评论

小程序中使用防抖函数

在小程序中使用防抖函数可以有效的减少请求次数从而提升性能

这几天看了很多关于防抖函数的博客,我是在微信小程序中使用,在此总结一下关于防抖函数的知识。

为什么需要防抖函数?
防抖函数适用的是【有大量重复操作】的场景,比如列表渲染之后对每一项进行操作。

函数代码:

var timer;
debounce: function (func, wait) {
    
    return () => {

      clearTimeout(timer);

      timer = setTimeout(func, wait);

    };

  },

参数
func:需要防抖的函数;
wait:number类型,setTimeout的时间参数;

代码分析:
命名一个叫做debounce的函数,参数有两个(func,wait),return一个函数,内容为清除计时器,然后设置计时器,计时器的意思是:在wait时间后执行func。

清除计时器是整个函数的核心,因为防抖需要不停地清除计时器,最后在计时器结束后触发func来达到效果。

防抖函数的调用方法
example:

this.debounce(this.函数名,3000)()

在使用这个函数的时候我遇到了一些问题:
因为微信小程序中很多地方都需要使用this.setData,如果对于this指向的理解不深入的话,很容易出现以下情况:
1:this==undefined;
2:Error:data is not defined;
等等一些列关于this的问题。
解决方法:

this.debounce(this.函数名.bind(this),3000)()

使用bind(this)把this指向传到函数内部就解决了。

最后一次编辑于  2019-03-19  
点赞 4
收藏
评论

5 个评论

  • @wolf-Logan
    @wolf-Logan
    2020-12-22

    毛用都没有,根本不起作用

    2020-12-22
    赞同 1
    回复
  • 林上皓
    林上皓
    2019-03-22

    var timer=null

    timer&&clearTimeout(timer);

    timer = setTimeout(func, wait);

    应该也可以这样写

    2019-03-22
    赞同 3
    回复 1
    • 酒吧炒饭
      酒吧炒饭
      2022-03-31
      是这样没错,不过从方法中调用在的话得这么写


      timer&&clearTimeout(timer);
      timer = setTimeout(func.bind(this), wait);
      2022-03-31
      回复
  • spiritelf(黄钦
    spiritelf(黄钦
    2020-08-19

    怎么防抖函数不起效果,还是会执行多次?

    2020-08-19
    赞同 1
    回复
  • 垚森
    垚森
    2020-09-08

    文章很好,学习了,确实是对this 指向不理解导致对问题

    我也碰到了同样的问题

    报错信息

    原本的this 编译了 undefined

    接下来 上第二个版本

    这是OK的

    我是猜出来的,现在 还没有时间 深入 研究 ,我的问题是箭头函数的问题

    虽然最终将箭头函数编译成function()



    2020-09-08
    赞同
    回复 1
    • 等疯🐶
      等疯🐶
      2022-11-15
      你这是啥编辑器
      2022-11-15
      回复
  • 驰子
    驰子
    2019-07-15

    为啥我用这个函数防抖报这个错误呢?是哪里不对么?


    2019-07-15
    赞同
    回复 1
    • 杜尚泽
      杜尚泽
      2019-07-30
      你照着我的写试试
      2019-07-30
      回复
登录 后发表内容