性能优化——函数防抖

场景

• 搜索框，根据输入内容做模糊匹配，输入的时候不出现结果，输完以后得到匹配的结果
• 用户注册时候的手机号码验证和邮箱验证了，只有等用户输入完毕后，前端才需要检查格式是否正确

概念

  以大学考试为例，如果一次考试中没及格，那么就需要重新考试。函数防抖则是实现类似的效果——事件被触发n秒后再执行回调（考试及格），如果在这n秒内又被触发（不及格），则重新计时。

实现

  没有代码的博客都是耍流氓，我们以keyup事件为例来看看函数防抖。

• 未优化代码

运行的结果如图：

  只要按下键盘，就会触发一次ajax请求。不仅浪费资源，而且用户体验也不好，用户是在输出完整的字符后，才会请求。进行一下优化：

• 函数防抖优化后的代码

  运行结果如图：

  我们规定每1000ms内触发keydown事件，则重新计算触发事件，否则执行keydown函数，执行一次请求。