防抖和节流

1. 相同点：防抖和节流的作用都是在高频事件中防止函数被多次调用。
2. 不同点：防抖函数只会在高频事件结束后n秒调用一次函数，节流函数会在高频事件触发过程中每隔n秒调用一次函数。

应用场景

• 都是在使用高频事件来调用函数的过程时，例如：resize、scroll事件，拖拽时的mousemove事件，文字输入、自动完成的keyup事件。

封装防抖函数

• 定义：触发高频事件后单位时间内只执行一次函数，如果指定时间内高频事件再次被触发，则重新计算时间
• scroll事件滚动触发事件
• 搜索框输入查询，等用户停止输入时再调用方法，减轻服务端压力
• 表单验证
• 按钮提交事件
• 浏览器窗口缩放，resize(如窗口停止改变大小之后重新计算布局)等

function debounce(func, wait) {
  let timeout = null;
  return function() {
    const ctx = this;
    const args = arguments;
    if (timeout) {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        func.apply(ctx, args)
      }, wait);
    }
  }
}

节流函数

• 定义：在单位时间内，只触发一次函数，如果单位事件内触发多次函数，只有一次生效
• DOM元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas模拟画板功能
• 射击游戏的mousedown/keydown事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多

function throttle(func, wait) {
  let timeout = null;
  return function () {
    const ctx = this;
    const args = arguments;
    if (!timeout) {
      timeout = setTimeout(() => {
        timeout = null;
        func.apply(ctx, args);
      }, wait)
    }
  }
}