前端如何防止请求被多次调用，导致数据絮乱等相关问题。

前言

在实际开发总会遇到一些类似这样的问题：

 1.请求被多次调用，如果是put 或者 post之类修改数据的请求，多次调用，可能出现一些报错，或者数据出现一些问题。

 2.在某一些场景下，别点击触发事件，拖动，滚动条监控等事件中，可能会出现一个请求被多次调用，造成服务压力过大。

如何遇到这个问题，这里有两个方案。

一、通过对网络请求做一些文章，来控制一定时间内不能多次请求且当前请求未完成不能再次请求。

axios中有一个可以取消请求的类CancelToken，通过这个类实现我们的目的。大概流程就是，每发送一次请求，就将该次请求地址放到一个队列里面，在请求响应拦截里面，在删除这个队列中该次请求的地址，如果该次请求还在请求中padding状态，则在请求前的拦截里面则取消该次请求，完成请求被多次调用的目地，直接上代码吧。

// 正在进行中的请求列表
let reqList = []
/**
 * 阻止重复请求
 * @param {array} reqList - 请求缓存列表
 * @param {string} url - 当前请求地址
 * @param {function} cancel - 请求中断函数
 * @param {string} errorMessage - 请求中断时需要显示的错误信息
 */
const stopRepeatRequest = function (reqList, url, cancel, errorMessage, method) {
  //非post put请求屏蔽此功能
  if (!(method == 'post' || method == 'put')) {
    return;
  }
  const errorMsg = errorMessage || '';
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] === url) {
      cancel(errorMsg);
      return
    }
  }
  reqList.push(url)
}
/**
 * 允许某个请求可以继续进行
 * @param {array} reqList 全部请求列表
 * @param {string} url 请求地址
 */
const allowRequest = function (reqList, url, method) {
  if (!(method == 'post' || method == 'put')) {
    return;
  }
  for (let i = 0; i < reqList.length; i++) {
    if (reqList[i] == url) {
      reqList.splice(i, 1);、
      break
    }
  }
}
// HTTPrequest拦截
axios.interceptors.request.use(config => {
  // 设置cancelToken对象
  let cancel;
  let baseUrl = config.baseURL.substr(0, config.baseURL.length - 1);
  config.cancelToken = new axios.CancelToken(function (c) {
    cancel = c
  })
  // // 阻止重复请求。当上个请求未完成时，相同的请求不会进行
  stopRepeatRequest(reqList, baseUrl + config.url, cancel, `${config.url} 请求被中断`, config.method);
  return config
}, error => {
  return Promise.reject(error)
})
// HTTPresponse拦截
axios.interceptors.response.use(res => {
  // 增加延迟，相同请求不得在短时间内重复发送
  setTimeout(() => {
    allowRequest(reqList, res.config.url, res.config.method)
  }, 1000)
  //拦截响应后的操作...~~~~

}, error => {
  setTimeout(() => {
    allowRequest(reqList, error.config.url, error.config.method)
  }, 1000)

})

二、利用函数的节流。
函数节流：一个函数执行一次后，只有大于设定的执行周期后才会执行第二次。
有个需要频繁触发函数，出于优化性能角度，在规定时间内，只让函数触发的第一次生效，后面不生效。

1.如何实现

其原理是用时间戳来判断是否已到回调该执行时间，记录上次执行的时间戳，然后每次触发 scroll 事件执行回调，回调中判断当前时间戳距离上次执行时间戳的间隔是否已经到达 规定时间段，如果是，则执行，并更新上次执行的时间戳，如此循环；
`

function throttle(fn, delay) {
    // 记录上一次函数触发的时间
    var lastTime = 0;
    return function() {
        // 记录当前函数触发的时间
        var nowTime = Date.now();
        if (nowTime - lastTime > delay) {
        // 修正this指向问题
            fn.call(this);
        // 同步时间
          lastTime = nowTime;
        }
    }
}
document.onscroll = throttle(function() { console.log('scroll事件被触发了' + Date.now()) }, 200)

上例中用到了闭包的特性--可以使变量lastTime的值长期保存在内存中。

2.函数节流的应用场景

需要间隔一定时间触发回调来控制函数调用频率：

• DOM 元素的拖拽功能实现（mousemove）
• 搜索联想（keyup）
• 计算鼠标移动的距离（mousemove）
• Canvas 模拟画板功能（mousemove）
• 射击游戏的 mousedown/keydown 事件（单位时间只能发射一颗子弹）
• 监听滚动事件判断是否到页面底部自动加载更多：给 scroll 加了 debounce 后，只有用户停止滚动后，才会判断是否到了页面底部；如果是 throttle 的话，只要页面滚动就会间隔一段时间判断一次

三、函数防抖(debounce)

1.如何实现

其原理就第一次调用函数，创建一个定时器，在指定的时间间隔之后运行代码。当第二次调用该函数时，它会清除前一次的定时器并设置另一个。如果前一个定时器已经执行过了，这个操作就没有任何意义。然而，如果前一个定时器尚未执行，其实就是将其替换为一个新的定时器，然后延迟一定时间再执行。

<button id='btn'>按钮</button>
<script type="text/javascript"> function debounce(fn, delay) {
    // 记录上一次的延时器
   var timer = null;
    return function() {
    // 清除上一次延时器
    clearTimeout(timer)
    timer = setTimeout(function() {
            fn.apply(this)
        }, delay)
    }
}
document.getElementById('btn').onclick = debounce(function() {
    console.log('点击事件被触发' + Date.now())
}, 1000) </script>

上例中也用到了闭包的特性--可以使变量timer的值长期保存在内存中。

2.函数防抖的应用场景

对于连续的事件响应我们只需要执行一次回调：

• 每次 resize/scroll 触发统计事件
• 文本输入的验证（连续输入文字后发送 AJAX 请求进行验证，验证一次就好）

总结

函数节流和函数去抖的核心其实就是限制某一个方法被频繁触发，而一个方法之所以会被频繁触发，大多数情况下是因为 DOM 事件的监听回调，而这也是函数节流以及防抖多数情况下的应用场景。
参考文章
----~~~~

函数节流和防抖