[图片]

大家好，上次给大家分享了swiper仿tab的小技巧： https://developers.weixin.qq.com/community/develop/article/doc/000040a5dc4518005d2842fdf51c13 [代码]今天给大家分享两个有用的函数，《函数防抖和函数节流》 函数防抖和函数节流是都优化高频率执行js代码的一种手段，因为是js实现的，所以在小程序里也是适用的。 [代码] 首先先来理解一下两者的概念和区别： [代码] 函数防抖（debounce）是指事件在一定时间内事件只执行一次，如果在这段时间又触发了事件，则重新开始计时，打个很简单的比喻，比如在打王者荣耀时，一定要连续干掉五个人才能触发hetai kill '五连绝世'效果，如果中途被打断就得重新开始连续干五个人了。 函数节流（throttle）是指限制某段时间内事件只能执行一次，比如说我要求自己一天只能打一局王者荣耀。 这里也有个可视化工具可以让大家看一下三者的区别，分别是正常情况下，用了函数防抖和函数节流的情况下：http://demo.nimius.net/debounce_throttle/ [代码] 适用场景 函数防抖 搜索框搜索联想。只需用户最后一次输入完，再发送请求 手机号、邮箱验证输入检测 窗口resize。只需窗口调整完成后，计算窗口大小。防止重复渲染 高频点击提交，表单重复提交 函数节流 滚动加载，加载更多或滚到底部监听 搜索联想功能 实现原理 [代码] 函数防抖 [代码] [代码]const _.debounce = (func, wait) => { let timer; return () => { clearTimeout(timer); timer = setTimeout(func, wait); }; }; [代码] [代码] 函数节流 [代码] [代码]const throttle = (func, wait) => { let last = 0; return () => { const current_time = +new Date(); if (current_time - last > wait) { func.apply(this, arguments); last = +new Date(); } }; }; [代码] [代码] 上面两个方法都是比较常见的，算是简化版的函数 [代码] lodash中的 Debounce 、Throttle [代码] lodash中已经帮我们封装好了这两个函数了，我们可以把它引入到小程序项目了，不用全部引入，只需要引入debounce.js和throttle.js就行了，链接：https://github.com/lodash/lodash 使用方法可以看这个代码片段，具体的用法可以看上面github的文档，有很详细的介绍：https://developers.weixin.qq.com/s/vjutZpmL7A51[代码]

这几天看了很多关于防抖函数的博客，我是在微信小程序中使用，在此总结一下关于防抖函数的知识。 为什么需要防抖函数？ 防抖函数适用的是【有大量重复操作】的场景，比如列表渲染之后对每一项进行操作。 函数代码： [代码]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指向传到函数内部就解决了。