函数防抖和函数节流的区别

1.概念

函数防抖（debounce）

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

函数节流（throttle）

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

2.常见的应用场景

函数防抖（debounce）

• 搜索框搜索输入。只需用户最后一次输入完，再发送请求
• 手机号、邮箱验证输入检测
• 窗口大小Resize。只需窗口调整完成后，计算窗口大小。防止重复渲染。

函数节流(throttle)

• 滚动加载更多数据，监听到滚动到底部加载数据
• 搜索联动

3.实现原理

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

/**
 * @desc 防抖函数
 * @param {需要防抖的函数} func
 * @param {延迟时间} wait
 * @param {是否立即执行} immediate
 */
export const debounce = (func, wait, immediate) => {
  let timeout

  return function(...args) {
    let context = this
    if (timeout) clearTimeout(timeout)

    if (immediate) {
      let callNow = !timeout
      timeout = setTimeout(function() {
        timeout = null
      }, wait)
      if (callNow) func.apply(context, args)
    } else {
      timeout = setTimeout(function() {
        func.apply(context, args)
      }, wait)
    }
  }
}

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

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

函数节流（throttle）

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。

4.异同比较

相同点

• 通过 setTimeout 实现
• 目的都是为了降低执行频率，节省计算资源

不同点

• 函数防抖在一段连续操作结束后处理回调。函数节流在一段连续操作中，每隔一段时间执行一次。