基于jquery，ajax请求及自我终止的函数封装

场景描述：

在我们平时的开发过程中，经常会遇到这样的情况。在搜索功能中进行模糊搜索或者联想关联。

这就要我们每次对输入框中的数据进行改动时，都要发送一次请求。当在短时间内多次操作改动时，问题就出现了。

每次操作的请求都会返回数据，有时，返回的数据需要时间长，有时返回的数据需要时间短。大家都知道，ajax请求默认的是异步请求，每次请求和请求后进行的操作，都是独立进行的。当同一个请求多次发生时，他在页面上最终执行的效果是，以最晚返回的数据进行相应的展示操作，而不是绝对以最后一次请求所返回的数据进行展示（注：最后一次请求不一定是最晚返回的。）。

我们想要的当然是最后一次请求的数据进行的展示操作了啊。那我们就要求，绝对最后一次执行的是最后一次请求后所要进行的操作。解决方法有两种：

一、使用定时器，限制请求次数。

保证在一定的时间间隔内，对输入框进行多次改动操作，发送的只有最后一次改动操作的请求。

这种方法有很大优点，首先在一定程度上，解决了上面所描述的问题。其次，他减少了请求次数，减少了服务器和浏览器的工作量。

但是它还是有缺点的。

1、那就是时间间隔的把控。你不知道每次请求究竟会用多长时间，你不清楚设置多少合适，长了牺牲了客户的体验，短了还是会遇到上面的问题。

2、你不知道你面对的究竟是一群什么样的客户。就算你满足1中的条件设置好，你的客户进行反人类操作，按照你设置的时间间隔进行字母输入，那你的工作还是白费了。

基于上面两点，我并不喜欢采用这种方法解决这个问题，所以代码也不上了，大家知道思路，逻辑自己梳理吧。（绝对不是小编自己没有整理，才不发代码的。）

二、基于ajax自身的终止函数

将没有进行完而重复进行的请求，终止掉，而且是只终止前一个ajax请求，新的请求在下一个请求发送前，不会终止。

在这个方法中，一定要注意，每一个ajax都有一个自己的函数名，不同的函数名定义的ajax就是不同的ajax请求了。要只能终止自己的ajax请求。

这个方法也是有优缺点的。

优点：无论客户多么反人类，无论数据请求多么耗时，他都能保证返回和操作的是最有一次请求的数据。

缺点：每次输入框中的数据改动都会发送请求，即他不能减少请求次数。而且终止的话，也只是不再执行ajax前端部分接下来的操作，后台工作量还在。

好了两种方法大概这样，如果有人想两个方法结合，可以自己整理下啊。接下来，我就只把第二种方法的代码上传上去，仅供参考。不足之处还望指正。

var AllAjax={
 commonAjax =function (interface,params,callback,flag) {
 var data={};
 $.each(params,function(i,v){
 data[i]=v;
 });
　　　　　　　　//AllAjax.closeError这个对象元素用于标识，以便于在ajax的报错函数中输出想要的值。
 if(AllAjax[interface]){
 AllAjax[interface].abort();
 AllAjax.closeError=false;
 }
 AllAjax[interface]=$.ajax({
 type: "post",
 url: interface,
 data: params,
 dataType: "json",
 success: function(data){
 if(data.code == '200'){
 callback(data);
 }else{
 
 if(AllAjax.closeError){
 AllAjax.closeError=true;
 }else{
 AllAjax.closeError=true;
 }
 alert('数据有误！'+data.code);
 }
 },
 error:function (err) {
 if(AllAjax.closeError||AllAjax.closeError===undefined){
 alert('Network is error');
 }else{
 AllAjax.closeError=true;
 }
 }
 });
 };
}
//这个方法中使用对象的形式进行封装。使用方法 AllAjax.commonAjax (url,params,callback,flag);
//四个参数意义，
//url：请求的url，另外还用来作为这个url请求的ajax函数名。
//params:接口调用时传入的参数。
//callback：请求成功后调用的函数。
//flag：传入的另外要使用的参数。会作为callback的参数传入callback中。如果需要，可以在定义回调函数时接受两个参数。此参数可以不传。
复制代码

本次给大家推荐一个最后给大家推荐一个免费的学习群，里面概括移动应用网站开发，css，html，webpack，vue node angular以及面试资源等。 对web开发技术感兴趣的同学，欢迎加入Q群：864305860，不管你是小白还是大牛我都欢迎，还有大牛整理的一套高效率学习路线和教程与您免费分享，同时每天更新视频资料。 最后，祝大家早日学有所成，拿到满意offer，快速升职加薪，走上人生巅峰。

转载于:https://juejin.im/post/5bb218d66fb9a05cee1df679