节流和防抖：限制函数的执行次数

1.防抖

防抖原理：

事件响应函数在一段时间后才执行，如果在这段时间内再次调用，则重新计算执行时间。可理解为通过setTimeout的方式，在一定时间间隔内，将多次触发转变成一次触发。

应用场景：

1. scroll时间滚动触发
2. 搜索框输入查询
3. 表单验证
4. 按钮提交事件
5. 浏览器窗口缩放

简单实现：

function debounce(func, wait) {
  let timeout
  //由于绑定点击事件需要的是函数，所以这里必须返回一个函数
  return function() {
    let _this = this
    let args = arguments
    clearTimeout(timeout)
    timeout = setTimeout(function() {
      func.apply(_this, args)
    }, wait)
  }
}

2.节流

原理:如果你持续触发事件，每隔一段时间，只执行一次操作，可理解为减少一段时间之内事件的触发频率。

应用场景：

1. DOM元素的拖拽实现功能
2. 射击游戏
3. 计算鼠标移动的距离
4. 监听scroll滚动事件

简单实现：

function throttle(fn, delay) {
  let begin = 0
  return function() {
    let cur = Date.now()
    if(cur - begin > delay) {
      fn.apply(this, arguments)
      begin = cur
    }
  }
}