内容字号: 默认 大号 超大号

段落设置:段首缩进取消段首缩进

字体设置:切换到宋体切换到微软雅黑

[已解决]点击tab切换Ajax异步请求数据时防止数据不对应的问题

发布:2017-12-14 浏览: 评论(

如下图:

项目中经常会出现这种列表页,请求不同状态的数据放在同一个块里面,点击切换过快的时候很容易出现回来的数据和选中的tab不对应的情况;这里重点要用到的就是abort()这个函数;此函数的主要作用是在发生下一次请求前先停止上一次请求;这样就可以保证回来的数据永远都是最后一次的点击选中;就不会发生切换点击完了数据还没出来所造成的数据和tab不对应的问题,直接上代码:

var AjaxRequestXHR="";
$(seletor).on("click",function(){
    var self=$(this);
    var dataTypeId=self.attr("data-typeId");

    AjaxRequestXHR=$.ajax({
        type:"post",
        url:"/ajax/getData",
        data:{"dataTypeId":dataTypeId},
        beforeSend:function(xhr){
            if(AjaxRequestXHR){
                AjaxRequestXHR.abort();//如果上一次的请求还在则停止上一次的请求
            }
        },
        success:function(result){
            //成功之后的代码
        }
    });
})
前端新手交流群
欢迎加入web前端新手交流qq群:734802480

更多文章

相关文章

评论

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。


Copyright © 2014-2021 seozhijia.net 版权所有-粤ICP备13087626号-4