js的防抖和节流函数

一、防抖（debounce）

1、防抖概念

防抖就是在规定时间内多次触发一个事件，只会执行一次，防止性能浪费和多次触发引起的后端数据异常。

2、应用场景

登录、发短信等按钮避免用户点击太快，以致于发送了多次请求，需要防抖； 调整浏览器窗口大小时，resize 次数过于频繁，造成计算过多，此时需要一次到位，就用到了防抖； 文本编辑器实时保存，当无任何更改操作一秒后进行保存；

当我们在百度搜索时，下方会自动给出相关提示。如果每次用户输入变化都立即查询，那么会造成性能浪费，比如用户想搜索nihao，当用户在输入n的时候，就会触发查询，然后每次改变都会查询一次，给用户的体验也并不好。这个地方就可以使用防抖，当距离用户输入的时间间隔超过某一个时间时，才开始搜索，这个时间大概100ms应该就可以。

3、如何防抖

/*
* fn [function] 需要防抖的函数
* delay [number] 毫秒，防抖期限值
*/
function debounce(fn, delay) {
  // 维护一个 timer，用来记录当前执行函数状态
  let timer = null;

  return function() {
    // 通过 ‘this’ 和 ‘arguments’ 获取函数的作用域和变量
    let context = this;
    let args = arguments;
    // 清理掉正在执行的函数，并