web前端基础教程：防止重复发送ajax请求的思索

　　防止重复发ajax请求是平时开发中遇到频次较高的问题了。我一般解决方案有以下几种，

　　一、UI限制

点击完按钮后，就禁用按钮， 并开启显示等待动画，收到服务器的成功响应后，再隐藏动画，最好设置超时，时间不要太长，若是太长，用户会骂街。

　　图片来自网络

　　二、JS封锁

　　(1)、若是用户属于暴力连续点击按钮，能够经过函数防抖来作，其实就是闭包里的setTimeout 与clearTimeout, 连续的点击会把上一次点击处理函数清掉，咱们的ajax请求会在最后一次点击后再发出。

(2)、多个tab 快速切换，若是从tab1快速切换到tab2，再从tab2快速切换到tab1，不避免的同一个tab 要重复发起屡次请求。除了屡次请求的问题，还有一个问题就是，若是在单页面应用中，切换tab后dom 销毁了，此时数据回来了，若是去操做了已经销毁的dom，那么控制台会报错。而在vue ，react 等不须要开发者去操做的dom的框架，咱们去修改状态，也会报出以下的警告信息：

　　解决这个问题的思路就是abort掉上一个请求。XMLHttpRequest对象有abort方法，能够直接调用。若是使用第三方的请求库的话，好比axios，咱们能够为咱们的请求建立一个cancel token ，在每一个请求设置一个token，在页面切换， 或者组件销毁前，经过source.cancel取消就行了，其实原理仍是经过xhr的abort方法实现。具体的代码以及流程能够参考以下：

　　

　　固然最终解决这个问题仍是要根据场景，灵活选择，要有本身的freestyle。