函数防抖与函数节流

debounce -- 函数防抖，throttle -- 函数节流都是在JavaScript中可以限制函数发生频率的utility，可以作为性能优化的一种手段。
举一个例子，在搜索框中进行搜索，然后根据keyup事件异步查询，如果不对事件处理器函数做发生频率限制，那么用户快速输入10个字母，可能会发出不止10个请求，按照这种模型不但影响用户体验，而且还会加重服务器的负担。那么就需要对函数进行防抖或者节流了。

其实函数防抖和函数节流这两个概念一开始对我于来说还是有点难以理解的。那我试着理一理。

前提条件: 一个函数fn在短时间内被多次执行，就是频率高。
到达目的: 降低该函数发生的频率。

函数防抖: 就是说有一个定时器，fn是在定时time后发生的，如果在还没达到定时时间前，fn又触发了一次，那么这个定时器被重置。

函数节流: 设定一个固定时间段time，fn的频率降低为每time执行一次

简单实现

• 防抖

function debounce(fn,time) {
  let timer = null;

  return function() {
    clearTimeout(timer);
    timer = null;

    timer = setTimeout(fn,time)
  }
}

window.onscroll = debounce(function () {
  console.log(1);
},1000)

• 节流

function throttle(fn,time) {
  let start = Date.now();

  return function() {
    if(Date.now() > start + time && time > 0) { // 超过下一次预定时间
      start = Date.now() // 重置
      fn()
    }
  }
}

window.onscroll = throttle(function(){
  console.log(1);
},300)

待续。。。