函数防抖和函数节流

概念

函数防抖(debounce)

函数防抖是指触发事件后在一定的时间内，函数只能执行一次，如果在这个时间段内重新触发事件会重新计算执行时间。简单来说，就是一定时间内连续多次触发事件，方法只在最后一次触发事件的时候执行。

函数节流(throttle)

函数节流是指预先设定一个执行周期，当调用动作的时刻大于等于执行周期则执行该动作，然后进入下一个新周期。简单来说，就是限制一个方法在一定时间内执行一次。

常用的应用场景

函数防抖(debounce)

• 根据输入的内容检索，当一定时间内没有输入，执行检索结果的展示。
• 调整窗口的大小，当一定时间内没有调整，计算窗口的大小。
• 多次点击按钮，当一定时间内执行执行一次点击事件。
  函数节流(throttle)
• 滚动加载更多数据，监听到滚动到底部加载数据
• 搜索联动

实现原理

使用定时器实现的函数防抖

function debounce(fn, delay = 500){
  let timer = null;
  return function () {
    if(timer){
      clearTimeout(timer);
    }
    timer = setTimeout(()=>{
      fn.apply(this, arguments)
      timer = null
    }, delay);
  };
};

// 应用例子 输入框输入检索
let input = document.getElementsByTagName('input')[0];
input.addEventListener('keyup', debounce(function (){
  console.log(this.value)
}, 500))

通过闭包标记保存setTimeout，每当用户输入的时候把前一个setTimeout清除掉，在创建一个新的setTimeout，保证输入字符后在一定的时间间隔内如果还有字符输入就不执行fn方法。

使用定时器实现的函数节流

function throttle(fn, delay = 100) {
  let timer = null
  return function () {
    if(timer){
      return
    }
    timer = setTimeout(()=>{
      fn.apply(this, arguments)
      timer = null
    }, delay)
  }
}
// 应用例子 判断滚动到底部
window.addEventListener('scroll', throttle(function (){
  let scrollTop = document.documentElement.scrollTop
    || document.body.scrollTop;
  let clientHeight = document.documentElement.clientHeight
    || document.body.clientHeight;
  let scrollHeight = document.documentElement.scrollHeight
    || document.body.scrollHeight;
  if (scrollTop + clientHeight === scrollHeight) {
     console.log('end');
  }
}, 100))

通过闭包标记保存setTimeout，每当用户滚动的时候判断是否有标记存在，存在则return跳过，不存在则标记一个setTimeout并在回调方法执行后将标记重置为null。

异同比较

相同点

• 通过 setTimeout 实现
• 目的都是为了降低执行频率，节省计算资源
  不同点
• 函数防抖在一段连续操作结束后处理回调。函数节流在一段连续操作中，每隔一段时间执行一次。