前言
在项目中我们通常需要使用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(" <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);
}