Ajax 多次异步请求分析

• 现象

  鼠标滑过列表发出请求，在页面上显示请求结果。鼠标一次性滑过多个列表项，发出多个请求，请求返回结果有时间查导致页面显示出现闪烁。

• 影响

  页面显示闪烁，视觉显示不好看，交互不友好

• 解决方法

  • 取消之前的请求响应

    在ajax请求未响应之前可以使用 xhr.abort() 取消，但如果发出的请求已经到达了服务器，这种终止只是让浏览器不在监听这个请求的响应，服务器端仍然会进行处理。使用 abort() 取消后会进入 error 回调函数

    // 定义请求对象
    var getCategoryInfoAjax = null;
    function getCategoryInfo() {
        if (getCategoryInfoAjax) {
            // 不为 null 说明之前请求过，需要取消请求
            getCategoryInfoAjax.abort();
        }
        getCategoryInfoAjax = $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            url: url,
            data: param,
            success: function (result, testStatus) {
                // 也可以在这里判断 ajax 请求是否存在来决定是否执行回调函数
            },
            complete: function (xhr, xs) {
                xhr = null;
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                if (xmlHttpRequest.statusText === 'abort') {
                    // 说明是主动中断，不作出提示
                } else {
                    layer.msg('失败');
                }
            }
        });
    
    }
    

    缺点：使用封装好的 ajax 方法，如果出现需要多个请求同时进行的情况，那么使用 abort() 取消请求会使其他请求终止。

    优点：重复多次请求的情况下，我们可以抛弃之前所有的请求响应，获得最后一次的请求响应。

  • 忽略之前的所有请求，保留最新一次的请求

    创建计数器，利用闭包技术来判断是否当前的ajax请求与响应返回是同一批次的。

    // 定义计数器
    var xhrCount = 0;
    function getCategoryInfo() {
        var seqNum = ++xhrCount;
        getCategoryInfoAjax = $.ajax({
            type: "POST",
            contentType: "application/x-www-form-urlencoded;charset=utf-8",
            url: url,
            data: param,
            success: function (result, testStatus) {
                if (seqNum === xhrCount) {
                    // 请求和响应属于同一批次的
                } else {
                    // 不相等说明请求和响应不是同一批次
                }
            },
            complete: function (xhr, xs) {
                xhr = null;
            },
            error: function (xmlHttpRequest, textStatus, errorThrown) {
                layer.msg('失败');
            }
        });
    
    }
    

• 避免Ajax多次发送重复请求几种处理方式