今天实现轨迹查询,也不知道别人家怎么查的,和我对接的后台提供的查询接口,万条数据让我自己轮询查,好吧,每次查2000条,结果最差的居然要耗时5到7秒,如此循环,直接导致我的web页面卡死,无奈无法去搞定后台小伙伴,只能前台开个“多线程”。
利用web worker!!
worker.js:
var totalCountStatus=-1;
var param;
var statusListAll=[];
var linkListAll=[];
function getAllUavStatus(param){
let obj=null;
var xmlhttpreq = new XMLHttpRequest();
xmlhttpreq.open('post',param.url,false);
let formData = new FormData();
formData.append('start', param.start);
formData.append('startTime', param.startTime);
formData.append('endTime', param.endTime);
formData.append('count', param.count);
formData.append('FCSSID', param.FCSSID);
formData.append('regno', param.regno);
xmlhttpreq.onreadystatechange=function () {
console.log("xmlhttpreq");
console.log(xmlhttpreq);
if(xmlhttpreq.readyState==4&&xmlhttpreq.status==200){
console.log("js原生请求登陆返回 xmlhttpreq:");
console.log(xmlhttpreq); //完全后台返回的数据
let data = JSON.parse(xmlhttpreq.responseText);
if(data.state==1){
totalCountStatus=data.data.totalCountStatus;
let statusList=data.data.statusList;
let linkList=data.data.linkList;
obj= {statusList:statusList,linkList:linkList,totalCountStatus:totalCountStatus};
return obj;
}
}
}
xmlhttpreq.send(formData);
return obj;
}
function initWorker(){
statusListAll=[];
linkListAll=[];
let obj=getAllUavStatus(param);
if(obj){
totalCountStatus=obj.totalCountStatus;
console.log("obj");
console.log(obj);
console.log(obj.statusList);
console.log("obj.concat");
statusListAll=statusListAll.concat(obj.statusList);
linkListAll= linkListAll.concat(obj.linkList);
}
while (totalCountStatus==-1){
console.log("等待第一次查询");
}
for(let i=0;i<(totalCountStatus-param.count);i=i+param.count){
param.start=param.start+param.count;
let obj=getAllUavStatus(param);
if(obj){
statusListAll= statusListAll.concat(obj.statusList);
linkListAll=linkListAll.concat(obj.linkList);
}
}
let res={statusListAll:statusListAll,linkListAll:linkListAll};
let data={"cmd":"RES","res":res};
self.postMessage(data);
}
var statusList;
var curIdex=0;
var stopTag=false;
var times=1;
self.addEventListener('message', function (e) {
var data = e.data;
console.log(e);
console.log(data);
switch (data.cmd) {
case 'INIT':
self.postMessage('WORKER STARTED !' );
param=e.data.data;
initWorker();
break;
/* case 'PLAY':
statusList = data.statusList;
stopTag=false;
curIdex=0;
sendAllPosition();
break;
case 'STOP':
self.postMessage('STOPED: ' ); // 或者父级worker.terminate();
stopTag=true;
break;
case 'PAUSE':
stopTag=true;
break;
case 'SPEED':
times= data.times;
break;*/
default:
self.postMessage('Unknown command: ' + data.msg);
};
}, false);
调用worker:
var worker = new Worker('../../js/worker.js');
worker.onmessage = function (event) {
console.log('Received message ' + event.data);
if(event.data.cmd=="RES"){
let res = event.data.res;
if(res.linkListAll){
linkListAll=res.linkListAll;
}
if(res.statusListAll){
statusListAll=res.statusListAll;
for(let i =0;i<statusListAll.length;i++){
devLngLatTransfer(statusListAll[i]);
let s = statusListAll[i];
let ollnglat=coordtransform.gps2OL(s.pos.lng,s.pos.lat);
pathArr.push(ol.proj.fromLonLat(ollnglat, wms_fcow.EPSG));
}
}
layer.close(loading);
// worker.postMessage({"cmd":"stop"});
getPosArr();
}
}
的确好了很多,‘’多线程‘’既视感~~~
另外:我模拟的轨迹,就是根据time的前后相邻差值, for循环setTimeout() 哈哈哈哈,倍速就是插值除以倍速值,咳咳咳~~~~
PPS:woker内部不能执行alert,confirm,貌似setTimeout也不行哦,所以我在外层setTimeout,
详情参考:http://www.ruanyifeng.com/blog/2018/07/web-worker.html
阿花要更努力学习!
<script>alert(1)</script>