防抖函数的理解(新手向,微信小程序适用)

防抖函数的理解(新手向,微信小程序适用)

    • 为什么需要防抖函数?
    • 防抖函数的调用方法

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

为什么需要防抖函数?

防抖函数适用的是【有大量重复操作】的场景,比如列表渲染之后对每一项进行操作。
函数代码:

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指向传到函数内部就解决了。
具体关于bind的内容可以参考MDN/bind()

你可能感兴趣的:(总结文章)