前言
在项目中我们通常需要使用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); }
原文地址:https://www.cnblogs.com/huanzi-qch/p/9562815.html
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。