js中的防抖和节流

一、目的：防止函数被无意义高频调用

二、理解：

1、防抖(debounce)

本质：函数在特定的时间内不再被调用后执行

原理：设置一个定时器，如果在设定的时间间隔内事件再次触发，就会清除上一次的定时器并重新设置和计时，直到指定时间间隔内没有再次触发，才会执行函数

缺点：如果事件在规定的时间间隔内被不断的触发，则调用方法会被不断的延迟

使用场景：文本框输入搜索（连续输入时避免多次请求接口）

个人通俗理解：事件连续触发，只执行最后一次回调函数

示例如下：

function showTop  () {
  var scrollTop = document.body.scrollTop ||document.documentElement.scrollTop;
  console.log('滚动条位置：' + scrollTop);
}
function debounce(fn, delay) {
  let timer = null; //借助闭包
  return function () {
    if (timer) {
      clearTimeout(timer);
    }
    timer = setTimeout(fn, delay) 
  }
}
window.onscroll=debounce(showTop,200)

2、节流(throttle)

本质：确保函数特定的时间内至多执行一次

原理：用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳

使用场景：resize、scroll、mousemove等事件触发监听

个人通俗理解：事件触发，函数执行，一定时间内函数无法再次执行

示例如下：

function showTop  () {
  var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
  console.log('滚动条位置：' + scrollTop);
}
function throttle(fn,delay){
  let valid = true;
  return function() {
  //
    if(!valid){
      return false
    }
    valid = false;
    setTimeout(() => {
       fn();
       valid = true;
      }, delay)
   }
}

请注意，节流函数并不止上面这种实现方案,例如可以完全不借助setTimeout，可以把状态位换成时间戳，然后利用时间戳差值是否大于指定间隔时间来做判定。也可以直接将setTimeout的返回的标记当做判断条件判断当前定时器是否存在，如果存在表示还在冷却，并且在执行fn之后消除定时器表示激活，原理都一样

三、总结

总结： 函数防抖：将多次操作合并为一次操作进行。原理是维护一个计时器，规定在delay时间后触发函数，但是在delay时间内再次触发的话，就会取消之前的计时器而重新设置。这样一来，只有最后一次操作能被触发。

函数节流：使得一定时间内只触发一次函数。原理是通过判断是否有延迟调用函数未执行。

区别： 函数节流不管事件触发有多频繁，都会保证在规定时间内一定会执行一次真正的事件处理函数，而函数防抖只是在最后一次事件后才触发一次函数。 比如在页面的无限加载场景下，我们需要用户在滚动页面时，每隔一段时间发一次 Ajax 请求，而不是在用户停下滚动页面操作时才去请求数据。这样的场景，就适合用节流技术来实现。

本文参考自：https://segmentfault.com/a/1190000018428170和https://www.jianshu.com/p/3d3f62b9d0ad和https://blog.csdn.net/zuorishu/article/details/93630578