乐观锁机制解决多层嵌套异步ajax问题

前言

　　在项目中我们通常需要使用ajax异步嵌套去请求数据并做数据的展示，当我们多次快速的多次的发起ajax，因为ajax是异步的，每个ajax触发回调的时间都是不可控的，这样就会造成前面发起的ajax跟后面发起的ajax都有可能去修改同一个DOM，导致展示的数据顺序错乱或数据重复，我们希望DOM展示的最新的数据，也就是最后一个ajax的回调去操作DOM就足够了。这里我使用类似Hibernate的乐观锁机制，全局版本号versions初始为0，versions++（当前ajax的版本号），同时versions传到getRacksByRoomIdAndAppend，并且会跟随request、response传入到嵌套的ajax，同时在两层ajax的回调函数版本号校验，当ajax版本号与全局版本号不相等时（另一个时间点再次触发flush）说明有新的flush被触发，停止当前ajax。

　　Hibernate的乐观锁机制：乐观锁不是真的去加锁，是一种冲突检测机制。常用的是版本的方式是：每个表中都有一个版本字段version，当用户更新数据库后，版本号+1,另一个用户修改后再+1,当用户发起更新发现数据库当前版本号与读取数据时版本号不一致（等于或小于数据库版本号）则说明在你上次读取数据后有人对数据进行了更新，这时候你的数据就是脏数据。

　　

代码编写

　　本例中，机房里面有机架，机架里面有设备（room-->rack-->equipement）

　　html：

<button class="btn btn-default" onclick="flush()">刷新</button>
<div id="text-div">

</div>

　　js：

//全局版本号
var versions = 0;

//刷新
function flush() {
    versions++;
    console.log("flush()，versions=" + versions);
    getRacksByRoomIdAndAppend(111, versions);
}

//根据机房id获取所属机架集合
function getRacksByRoomIdAndAppend(roomId, ajaxVrsions) {
    $.post(ctx + "/text1", {versions: ajaxVrsions, roomId: roomId}, function (result) {
        result = JSON.parse(result.data);
        // result.racks 是请求回来的机架数据集合
        // result.versions 是当前ajax的版本号
        // versions 是全局版本号
        for (var i = 0; i < result.racks.length; i++) {
            //检查版本号
            if (result.versions === versions) {
                //第一次之前empty
                if (i === 0) {
                    $("#text-div").empty();
                    console.log("最新的ajax开始执行回调，versions=" + result.versions);
                }
                var rack = result.racks[i];
                $("#text-div").append("<p id='" + rack.id + "'>" + rack.name + "</p>");
                getEquipmentByRackIdAndAppend(rack.id, result.versions);
            } else {
                break;
            }
        }
    });
}

//根据机架id获取所属设备集合
function getEquipmentByRackIdAndAppend(rackId, ajaxVrsions) {
    $.post(ctx + "/text2", {versions: ajaxVrsions, rackId: rackId}, function (result) {
        result = JSON.parse(result.data);
        for (var i = 0; i < result.equipments.length; i++) {
            //检查版本号
            if (result.versions === versions) {
                var equipment = result.equipments[i];
                $("#" + equipment.parentId).append("&nbsp;&nbsp;&nbsp;&nbsp;<p>" + equipment.name + "</p>");
            } else {
                break;
            }
        }
    });
}

　　java：

@PostMapping("text1")
public ResultModel<String> text1(String versions, String roomId) throws InterruptedException {
    Thread.sleep(3000);//模拟网络阻塞
    String racks = "{\"versions\":" + versions + ",\"racks\":[{\"id\":1,\"parentId\":111,\"name\":\"rack1\"},{\"id\":2,\"parentId\":111,\"name\":\"rack2\"}]}";
    return ResultModel.of(racks);
}

@PostMapping("text2")
public ResultModel<String> text2(String versions, String rackId) throws InterruptedException {
    Thread.sleep(3000);//模拟网络阻塞
    String equipments = null;
    if ("1".equals(rackId)) {
        equipments = "{\"versions\":" + versions + ",\"equipments\":[{\"id\":11,\"parentId\":1,\"name\":\"equipment11\"},{\"id\":12,\"parentId\":1,\"name\":\"equipment12\"}]}";
    }
    if ("2".equals(rackId)) {
        equipments = "{\"versions\":" + versions + ",\"equipments\":[{\"id\":21,\"parentId\":2,\"name\":\"equipment21\"},{\"id\":22,\"parentId\":2,\"name\":\"equipment22\"}]}";
    }
    return ResultModel.of(equipments);
}