大家好，上次给大家分享了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