函数的防抖、节流方法以及实现思路

一、什么是防抖、节流？

•  防抖，顾名思义，防止抖动。用于将用户的操作行为触发转换为程序行为触发，防止用户操作的结果抖动。一段时间内，事件在我们规定的间隔 n 秒内多次执行，回调只会执行一次。
• 节流，顾名思义，控制流量。用于用户在与页面交互时控制事件发生的频率，一般场景是单位的时间或其它间隔内定时执行操作。一段时间内，事件在每次到达我们规定的间隔 n 秒时触发一次。

简单来说：防抖，就是防止多次点击请求，在设置时间内只触发一次，适用于点击提交信息按钮等；节流：就是单位时间内点击多次，计算最后一次点击时间后执行函数。适用于搜索栏动态输入框搜索等。

二、下面介绍两种方法实现：

/*函数防抖*/
function debounce(fn, interval) {
  var timer;
  var gapTime = interval || 1000;//间隔时间，如果interval不传，则默认1000ms
  return function () {
    clearTimeout(timer);
    var context = this;
    var args = arguments;//保存此处的arguments，因为setTimeout是全局的，arguments不是防抖函数需要的。
    timer = setTimeout(function () {
      fn.call(context, args);
    }, gapTime);
  };
}
/*函数节流*/
function throttle(fn, gapTime) {
  if (gapTime == null || gapTime == undefined) {
    gapTime = 1500
  }

  let _lastTime = null
  return function () {
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      fn()
      _lastTime = _nowTime
    }
  }
}

三、调用方法：

 //微信小程序调用方法：
/*函数节流*/ 
  got_throttle: throttle(function (e) {
    console.log(111)
  }, 1000)
 /*函数防抖*/
  got_debounce: debounce(function (e) {
    console.log(111)
  }), 
//web调用方法
throttle(function (e) {
    console.log(111)
  }, 1000)
debounce(function (e) {
    console.log(111)
  }), 

四、防抖和节流之间的差别:

        1、防抖可能用于无法预知的用户主动行为，如用户输入内容去服务端动态搜索结果。用户打字的速度等是无法预知的，具有非规律性。

        2、节流可能用于一些非用户主动行为或者可预知的用户主动行为，如用户滑动商品橱窗时发送埋点请求、滑动固定的高度是已知的逻辑，具有规律性。

        3、防抖是关注于最后一次的事件触发，而节流则是在规定的时间里只执行一次。