JS中的防抖和节流

1、先看个栗子

在很多网站中都有这样一个功能，在页面显示一个按钮，用于返回页面的顶部，这个按钮只会在页面滚动到一定位置的时候出现，如：

image.png

这个功能的核心内容是----监听浏览器的滚动事件，返回当前滚动条与顶部之间的距离
具体的代码如下所示：

function show_scrollPosition(){
    var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
    console.log("当前滚动条位置为：",scrollPosition);
}
window.onscroll = show_scrollPosition

运行时（在chrome中，选中滚动条，点击一次键盘向下的方向键 ↓ ）的结果如下所示：

运行结果

在上图中我们可以看到，这个事件的执行频率很高，非常消耗浏览器的性能，在实际的运行中我们并不需要这么高频率的执行反馈。
为了避免这种场景，常见的优化方式有：防抖和节流

2、防抖（debounce）

JS防抖的基本思路是：规定一个期限时间，在首次触发事件时，不立即执行回调函数，而是在期限时间后再执行，如果期限时间内回调函数被重复执行，则期限时间重新计时。
在这里要用到setTimeOut()函数，判断期限值范围内该执行函数是否执行过，则需要一个变量来保存执行的结果。代码实现如下所示：

/* 
  *fn --> 需要防抖的函数；
  *delaytime --> 毫秒数，防抖所需期限值；
*/
function debounce(fn,delaytime){
    let timer = null 
    return function(){
        if(timer){
            clearTimeout(timer) //进入这里说明当前存在一个执行过程，并且同时又执行了一个相同事件，故取消当前的执行过程
        }
        timer = setTimeout(fn,delaytime)    
    }
}
function show_scrollPosition(){
    var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
    console.log("当前滚动条位置为：",scrollPosition);
} 

window.onscroll = debounce(show_scrollPosition,1000)

运行结果显示，当前滚动停止1s后，才会打印当前的滚动条位置，而且每次值打印当前的位置。

防抖后运行结果

防抖的缺点
由上述的例子可以看出防抖的缺点在于，事件执行完期限值范围内没有重复触发事件，才能再次执行该回调函数，若是期限范围内，不停的触发该事件，则回调函数不会执行，比如一直按着键盘的向下方向键，则一直不会打印出当前的滚动距离。
防抖的应用场景
（1）用户在输入框中输入一串字符，只会在最后一次输入完成后再去执行查询ajax请求，这样可以有效减少请求的次数，节约请求资源。
（2）window的scroll、resize事件，不断地滚动、或调整浏览器窗口大小时触发的对应事件，可以允许其只触发一次。

3、节流（throttle）

JS中节流的基本思路是：规定一个期限时间，在该时间内，触发事件的回调函数只能执行一次，如果期限时间内回调函数被多次触发，则只有一次能生效。
代码实现过程如下所示：

function throttle(fn, delay) {
  let last_time
  let timer = null
  return function () {
    let cur_time = new Date().getTime()
    if (last_time && cur_time < last_time + delay) { //若为真，则表示上次执行过，且在期限值范围内
      clearTimeout(timer)
      timer = setTimeout(() => {
        fn();
        last_time = cur_time
      }, delay)
    } else {
      last_time = cur_time;
      fn();
    }

  }
}

function show_scrollPosition() {
  var scrollPosition = document.body.scrollTop || document.documentElement.scrollTop;
  console.log("当前滚动条位置为：", scrollPosition);
}

window.onscroll = throttle(show_scrollPosition, 1000)

节流的道理其实就是让函数执行一次后，在某个时间段内暂时失效，过了这个时间段后再重新激活。

节流的应用场景
（1）在页面无限加载的情况下，需要用户再滚动页面时，每隔一定时间发起一次ajax请求，而不是再用户停下滚动时再去请求数据；
（2）监听滚动事件，比如是否滑倒底部自动加载更多，则用节流来判断；