防抖、节流

一、背景

防抖和节流都是为了限制函数高频执行而产生的概念，都属于性能优化的范畴。

举个例子，现在我们需要实现一个搜索建议的输入框，类似于百度首页的搜索功能

我们要怎么做呢？

<input id="search" />

function search () {
    ajax() // 访问后端接口
}
document.getElementById('search').onclick = search

正常流程是这个样子的，但是你会发现在你输入 browser 这个字母的过程中，前端一共发起了 7 次请求，这是完全没有必要的。实际上我们只需要一次查询就够了对吗？

二、防抖（debounce）

2.1 定义

对于短时间内连续触发的事件，防抖的意义在于，它可以让事件处理函数在某个特定的时间内只触发一次。就拿上面的例子来说，在你输入第一个字母和第二个字母之间的时间不超过 300ms 的话，就不执行查询操作，这样可以有效的减轻服务端的压力。

2.2 实现

既然需要“等一会”才执行事件处理函数，我们考虑使用 setTimeout 去实现它

let timer = null
document.getElementById('search').onclick = function () {
  if (tim